Two button one close to other at the bottom of RelativeLayout - Android

Two button one close to other at the bottom of RelativeLayout - Android - android

I am facing a problem with android layout.
I have a relative layout with a textview and an image overlapped and I would like to add two button at the bottom of the view, one close to other and that fill all the width of the view. Here below the manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:orientation="vertical"
android:id="#+id/RecordAccelDataLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_gravity="center"
android:longClickable="false"
android:layout_width="283dp"
android:layout_height="418dp"
android:src="#mipmap/bg_thand"
android:adjustViewBounds="false"
android:alpha="0.1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rectangle">
<TextView
android:textSize="20sp"
android:gravity="center_horizontal"
android:id="#+id/rec_progress_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="#string/title_activity_record_accel_data"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.adrenergic.tremorsense.circleGraph
android:layout_gravity="center"
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<TextView
android:textSize="20sp"
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/recording"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textIsSelectable="true"
/>
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:id="#+id/back"
android:layout_height="50dp"
android:text="#string/back"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:onClick="goBack"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="#string/stats"
android:onClick="goBack"
android:id="#+id/stats"
android:layout_marginBottom="3dip"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/back"/>
</RelativeLayout>
</LinearLayout>
</FrameLayout>
The layout appears in this way.
I would like that the two button appear in the same position but centered and that they fill equally the view in width.
Hope you will help me.

Can u modify your button layout impl. with the below sample and try.
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="1">
<Button
android:textColor="#ffffff"
android:layout_width="0dp"
android:id="#+id/back"
android:layout_weight="0.5"
android:layout_height="50dp"
android:text="#string/back"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:onClick="goBack"/>
<Button
android:textColor="#ffffff"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="0.5"
android:layout_gravity="center"
android:text="#string/stats"
android:onClick="goBack"
android:id="#+id/stats"
android:layout_marginBottom="3dip"/>
</LinearLayout>

Hi you can put buttons in linear layout and align parent bottom:
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="283dp"
android:layout_height="418dp"
android:layout_gravity="center"
android:adjustViewBounds="false"
android:alpha="0.1"
android:longClickable="false"
android:src="#mipmap/bg_thand" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rectangle"
android:orientation="vertical">
<TextView
android:id="#+id/rec_progress_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
android:text="#string/title_activity_record_accel_data"
android:textSize="20sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.adrenergic.tremorsense.circleGraph
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center" />
<TextView
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/recording"
android:textIsSelectable="true"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button
android:id="#+id/back"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:layout_weight="1"
android:onClick="goBack"
android:text="#string/back"
android:textColor="#ffffff" />
<Button
android:id="#+id/stats"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="3dip"
android:layout_toRightOf="#+id/back"
android:layout_weight="1"
android:onClick="goBack"
android:text="#string/stats"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
check this it will help.

android:weight is what you may be looking for. Enclose the two buttons inside a linear layout and add android:weight =1 for both of them. An example would be :
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button android:id="#+id/button1"
...
android:layout_weight="1"/>
<View
android:id="#+id/space"
...
android:layout_weight=".1"/>
<Button android:id="#+id/button2"
...
android:layout_weight="1"/>
</LinearLayout>

You need to add spacer in in center bottom and align two button to that spacer like this :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.adrenergic.tremorsense.circleGraph
android:layout_gravity="center"
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<TextView
android:textSize="20sp"
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textIsSelectable="true"
/>
//Aligh Space in center with align to bottom
and set relation of two button to this spacer
<Space
android:layout_width="1px"
android:layout_height="1px"
android:layout_above="#+id/back"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:id="#+id/space"/>
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:id="#+id/back"
android:layout_height="50dp"
android:text="Back"
android:layout_gravity="center"
android:onClick="goBack"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/accelText"/>
<Button
android:textColor="#ffffff"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="Status"
android:onClick="goBack"
android:id="#+id/stats"
android:layout_alignParentBottom="true"
android:layout_toStartOf="#+id/space"/>
</RelativeLayout>

Use this layout changes made with Button added inside Linear Layout and filled it with weight with android:gravity="bottom" and android:orientation="horizontal".
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RecordAccelDataLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="283dp"
android:layout_height="418dp"
android:layout_gravity="center"
android:adjustViewBounds="false"
android:alpha="0.1"
android:longClickable="false"
android:src="#drawable/common_ic_googleplayservices" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/common_ic_googleplayservices"
android:orientation="vertical">
<TextView
android:id="#+id/rec_progress_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center_horizontal"
android:text="Progress"
android:textSize="20sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.adrenergic.tremorsense.circleGraph
android:id="#+id/progressgraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center" />
<TextView
android:id="#+id/accelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="REcording"
android:textIsSelectable="true"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/back"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="0.50"
android:onClick="goBack"
android:text="Back"
android:textColor="#ffffff" />
<Button
android:id="#+id/stats"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_weight="0.50"
android:onClick="goBack"
android:text="Stats"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</FrameLayout>

Related

How to adjust weight sum for horizontal gap between relativelayout

I have one Framelayout inside that i have Linealayout whose weightSum 5.1 inside there we have 5 layout i want to adjust horizontal gap each based one some ratio (27:51:48:48:48:24) from left to right so that it should but its not fixing. how to fix it?
i tried with layout_weight 1,.9,.9,.8,1 but its not fixing
that ratio but UI its not fixing my horizontal gap ratio.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bb_bottom_bar_outer_container"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/float_common"
android:clickable="true">
<LinearLayout
android:id="#+id/btn_updatenow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="horizontal"
android:weightSum="5.1">
<RelativeLayout
android:id="#+id/float_layout_home"
android:layout_width="#dimen/dp0"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackground"
android:orientation="vertical"
android:paddingTop="2dp">
<ImageView
android:id="#+id/float_image_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin_6"
android:background="#drawable/float_home__new_click" />
<TextView
android:id="#+id/float_text_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/padding_7"
android:letterSpacing="-0.05"
android:text="#string/home"
android:textColor="#color/text_mid_grey" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/float_layout_collect"
android:layout_width="#dimen/dp0"
android:layout_height="match_parent"
android:layout_weight=".9"
android:background="?attr/selectableItemBackground"
android:orientation="vertical"
android:paddingTop="2dp">
<ImageView
android:id="#+id/float_image_collect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin_6"
android:background="#drawable/float_collect_new_click" />
<TextView
android:id="#+id/float_text_collect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/padding_7"
android:letterSpacing="-0.05"
android:text="#string/collect_tab_title"
android:textColor="#color/text_mid_grey" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/float_layout_offers"
android:layout_width="#dimen/dp0"
android:layout_height="match_parent"
android:layout_weight=".9"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="2dp">
<ImageView
android:id="#+id/float_offers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin_6"
android:background="#drawable/float_offercoupons_new_click" />
<TextView
android:id="#+id/txt_badge"
style="#style/Typeface.Footnote.White"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="top|right"
android:layout_marginLeft="-5dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#+id/float_offers"
android:background="#drawable/badge_background"
android:gravity="center"
android:visibility="gone" />
<TextView
android:id="#+id/float_text_offers"
style="#style/Typeface.Small.TextMidGrey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/padding_7"
android:gravity="center"
android:letterSpacing="-0.05"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/float_layout_voucher"
android:layout_width="#dimen/dp0"
android:layout_height="match_parent"
android:layout_weight=".8"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="2dp"
android:visibility="visible">
<ImageView
android:id="#+id/float_voucher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin_6"
android:background="#drawable/float_myimage_new_click" />
<TextView
android:id="#+id/float_text_voucher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/padding_7"
android:letterSpacing="-0.05"
android:text="#string/vouchers"
android:textColor="#color/text_mid_grey" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/float_layout_boost"
android:layout_width="#dimen/dp0"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="2dp"
android:visibility="visible">
<ImageView
android:id="#+id/float_boost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin_6"
android:background="#drawable/float_image2_new_click" />
<TextView
android:id="#+id/float_text_boost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/padding_7"
android:letterSpacing="-0.05"
android:text="#string/boost"
android:textColor="#color/text_mid_grey" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>
I want keep horizontal ratio so that my UI should like like below screen

You have a problem with your weight, but you will face another problem you say that your relative layout take a weight for width but inside you put wrap content on your element.
This is an exemple if your total width is 1000dp and you put a weight on an element inside your container, let's say the width of your element is 100dp with the calculated weight but your image take 120dp with wrap_content, did you see the problems ?
Let me show you this little solution I wrote
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="246">
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="27" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1" />
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="51" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text2" />
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="48" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text3" />
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="48" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text4" />
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="48" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text5" />
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="24" />
</LinearLayout>
In this code the weight are only on the space between element exactly like your drawing every element between space can wrap his content

Actionbar overlapping Scrollbar inside fragment

I have a scrollview as the root view of a fragment. It's child is a vertical linear layout with 4 elements. The first element is an image. The issue is that the image is getting cut and I can't seem to scroll upwards. This issue is only in landscape mode. Following is my xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:weightSum="4"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo_dark"
android:id="#+id/imageView2"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_gravity="center"
android:id="#+id/linearLayout3">
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/student"
android:layout_gravity="center" />
<AutoCompleteTextView
android:id="#+id/new_form_student"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="15"
android:textColor="#color/colorPrimary"
android:textColorHint="#fff"
android:padding="10dp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/person"
android:layout_gravity="center" />
<AutoCompleteTextView
android:id="#+id/new_form_person"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="15"
android:textColor="#color/colorPrimary"
android:textColorHint="#fff"
android:padding="10dp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/reason"
android:layout_gravity="center" />
<AutoCompleteTextView
android:id="#+id/new_form_reason"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="15"
android:textColor="#color/colorPrimary"
android:textColorHint="#fff"
android:padding="10dp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
android:layout_gravity="center" />
<AutoCompleteTextView
android:id="#+id/new_form_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="15"
android:textColor="#color/colorPrimary"
android:textColorHint="#fff"
android:padding="10dp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/submit"
android:id="#+id/new_form_submit"
android:padding="10dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/cancel"
android:id="#+id/new_form_cancel"
android:padding="10dp"/>
</LinearLayout>
And this is the screenshot of the issue:
Thanks,

Found it here:
Remove layout_gravity attribute from the Linear Layout that is directly placed inside scrollView, in your case,
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<!-- android:layout_gravity="center" -->
android:weightSum="4"
android:orientation="vertical">
instead of:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:weightSum="4"
android:orientation="vertical">

How to align ImageButtons in a layout evenly

I currently have 4 ImageButtons in a layout that takes only half of the screen height. I would like the ImageButtons to be placed evenly in the layout. Here is what I have:
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
This works, since here is the result:
The issue is, 1: I would like to add text under each button and I am not sure how that is going to work and 2: the white spots to the right and left of the ImageButtons are active, as if they were parts of the button. Is there a better way to do this?

You can do something like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/section1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 1"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 2"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 3"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:background="#android:color/transparent"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img4"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="info 4"
android:textColor="#fff"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
Result
and for second part of question you should set click listener on entire relative layout. for example for tap on first cell :-
xml
android:id="#+id/section1"
JAVA
findviewbyid(R.id.section1).setOnClickListener(...)

Another (and better) alternative is to work with TableLayout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn1"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn1"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn2"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn2"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 2"/>
</RelativeLayout>
</TableRow>
<TableRow
android:layout_height="0dp"
android:layout_weight="1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn3"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn3"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 3"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent">
<ImageButton
android:id="#+id/btn4"
android:contentDescription="#null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/feed_button"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/txt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn4"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:text="Text 4"/>
</RelativeLayout>
</TableRow>
</TableLayout>

How can I align views justify in LinearLayout?

I want to align two buttons left and right and I'm using layout_weight property width .25 for both of buttons. But when I did it, buttons width are became %50.
This is what I want:
This is what I have:
And this is my XML layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/like"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".25"
android:textColor="#212121"
android:background="#drawable/button_default"
android:layout_margin="5dp"
android:src="#drawable/like" />
<Button
android:text="NEXT"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textColor="#FFFFFF"
android:background="#drawable/button_primary"
android:layout_margin="5dp"/>
</LinearLayout>
How can I do this?

Try this code.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:weightSum="2">
<ImageButton
android:id="#+id/like"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#mipmap/ic_launcher"
android:src="#mipmap/ic_launcher"
android:textColor="#212121" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#mipmap/ic_launcher"
android:text="NEXT"
android:textColor="#FFFFFF" />
</LinearLayout>
</RelativeLayout>

Do it like 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="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/like"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/button_default"
android:src="#drawable/like"
android:textColor="#212121" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/button_primary"
android:text="NEXT"
android:textColor="#FFFFFF" />
</LinearLayout>
or like this:
<?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="wrap_content">
<ImageButton
android:id="#+id/like"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_margin="5dp"
android:background="#drawable/button_default"
android:src="#drawable/like"
android:textColor="#212121" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:background="#drawable/button_primary"
android:text="NEXT"
android:textColor="#FFFFFF" />
</RelativeLayout>

How to fill the layout to entire available width in Android

While developing a layout today I found some weird thing my Linear layout is not filling the available space .
//Image removed
My left layout is re-sizing according to content but i don't want that. What I want is the right edge of left hand side layout should touch the left edge of right layout.
I have tried both fill parent and wrap content with layout_weight but nothing is happening what i want is something like this.
// Image removed
My layout code :
<?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:paddingTop="6dp"
android:paddingBottom="6dp"
android:paddingLeft="7dp"
android:paddingRight="7dp">
<RelativeLayout
android:id="#+id/total_top_layout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingBottom="10dp"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/ammount_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="First Text Here"
android:textSize="20sp"
android:layout_centerVertical="true" />
<EditText
android:id="#+id/total_ammount_input"
android:layout_height="wrap_content"
android:layout_width="150dp"
android:singleLine="true"
android:layout_alignParentRight="true"
android:background="#color/hologreennewdark"
android:text="second Text"
android:layout_centerVertical="true"
android:padding="8dp"
android:gravity="center"
android:textColor="#color/WhiteSmoke" />
</RelativeLayout>
<View
android:id="#+id/divideaftertotal"
android:layout_width="#dimen/divide_width"
android:layout_height="#dimen/divider_height"
android:background="#color/YellowGreen"
android:layout_below="#+id/total_top_layout"
/>
<RelativeLayout
android:id="#+id/tens_view_top"
android:layout_below="#id/divideaftertotal"
android:layout_height="75dp"
android:layout_width="wrap_content"
>
<LinearLayout
android:id="#+id/tens_view_left"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
>
<LinearLayout
android:id="#+id/firstcoloumn"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<TextView
android:id="#+id/amount_rupee"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="Num1"
android:layout_centerVertical="true"
android:textSize="25sp" />
<TextView
android:id="#+id/multiply_sign"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="X"
android:layout_centerVertical="true"
android:textSize="26sp"
android:layout_toRightOf="#id/amount_rupee"
android:layout_marginLeft="40dp" />
<TextView
android:id="#+id/multiple_digit"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Num2"
android:layout_centerVertical="true"
android:textSize="25sp"
android:layout_toRightOf="#+id/multiply_sign"
android:layout_marginLeft="40dp" />
</LinearLayout>
<SeekBar
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#+id/multiple_digit"
android:layout_marginTop="8dp"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_height="100dp"
android:layout_width="wrap_content"
android:background="#color/hologreendark"
android:layout_alignParentRight="true">
<TextView
android:id="#+id/amount_rupee"
android:layout_height="fill_parent"
android:layout_width="100dp"
android:text="Num3"
android:layout_centerVertical="true"
android:textSize="25sp"
android:gravity="center"
/>
</LinearLayout>
</RelativeLayout>
<View
android:id="#+id/divideaftertens"
android:layout_width="#dimen/divide_width"
android:layout_height="#dimen/divider_height"
android:background="#color/YellowGreen"
android:layout_below="#+id/tens_view_top"
/>
</RelativeLayout>

On the layout android:id="#+id/tens_view_left", you could add this 2 atributes:
android:layout_alignParentLeft="true"
so that its left side is anchored in its parent's left border, and
android:layout_toLeftOf="#id/id_from_the_linear_layout_on_the_right"
And that layout is:
<LinearLayout
android:id="#+id/id_from_the_linear_layout_on_the_right"
android:layout_height="100dp"
android:layout_width="wrap_content"
android:background="#color/hologreendark"
android:layout_alignParentRight="true">
<TextView
android:id="#+id/amount_rupee"
android:layout_height="fill_parent"
android:layout_width="100dp"
android:text="Num3"
android:layout_centerVertical="true"
android:textSize="25sp"
android:gravity="center"
/>
</LinearLayout>
By the way, you might need to set android:orientation="horizontal"
on the layout android:id="#+id/tens_view_top"

When using layout_weight, set the layout_width to 0dp (for horizontal orientation).

it could be like,
<LinearLayout
android:id="#+id/tens_view_left"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
>
<LinearLayout
android:id="#+id/firstcoloumn"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="horizontal"
>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="0dp"
android:orientation="vertical"
android:layout_weight="1">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<TextView
android:id="#+id/amount_rupee"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="Num1"
android:layout_centerVertical="true"
android:textSize="25sp" />
<TextView
android:id="#+id/multiply_sign"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="X"
android:layout_centerVertical="true"
android:textSize="26sp"
android:layout_toRightOf="#id/amount_rupee"
android:layout_marginLeft="40dp" />
<TextView
android:id="#+id/multiple_digit"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Num2"
android:layout_centerVertical="true"
android:textSize="25sp"
android:layout_toRightOf="#+id/multiply_sign"
android:layout_marginLeft="40dp" />
</LinearLayout>
<SeekBar
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#+id/multiple_digit"
android:layout_marginTop="8dp"
/>
</LinearLayout>
<LinearLayout
android:layout_height="100dp"
android:layout_width="wrap_content"
android:background="#color/hologreendark"
android:layout_alignParentRight="true">
<TextView
android:id="#+id/amount_rupee"
android:layout_height="fill_parent"
android:layout_width="100dp"
android:text="Num3"
android:layout_centerVertical="true"
android:textSize="25sp"
android:gravity="center"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Change the RelativeLayout to LinearLayout that contain two layout you want to have close, and add layout_weight=1 to first LinearLayout with layout_width=0dip like
<LinearLayout
android:id="#+id/tens_view_top"
android:layout_below="#id/divideaftertotal"
android:layout_height="75dp"
android:layout_width="wrap_content"
>
<LinearLayout
android:layout_weight="1"
android:id="#+id/tens_view_left"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="0dip"
>
<LinearLayout
android:id="#+id/firstcoloumn"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<TextView
android:id="#+id/amount_rupee"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="Num1"
android:layout_centerVertical="true"
android:textSize="25sp" />
<TextView
android:id="#+id/multiply_sign"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="X"
android:layout_centerVertical="true"
android:textSize="26sp"
android:layout_toRightOf="#id/amount_rupee"
android:layout_marginLeft="40dp" />
<TextView
android:id="#+id/multiple_digit"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Num2"
android:layout_centerVertical="true"
android:textSize="25sp"
android:layout_toRightOf="#+id/multiply_sign"
android:layout_marginLeft="40dp" />
</LinearLayout>
<SeekBar
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#+id/multiple_digit"
android:layout_marginTop="8dp"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_height="100dp"
android:layout_width="wrap_content"
android:background="#FFCCDD"
android:layout_alignParentRight="true">
<TextView
android:id="#+id/amount_rupee"
android:layout_height="fill_parent"
android:layout_width="100dp"
android:text="Num3"
android:layout_centerVertical="true"
android:textSize="25sp"
android:gravity="center"
/>
</LinearLayout>

// try this i have used LinearLayout rather than RelativeLayout
<?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:padding="7dp">
<LinearLayout
android:id="#+id/total_top_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:paddingBottom="10dp">
<TextView
android:id="#+id/ammount_view"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_width="0dp"
android:text="First Text Here"
android:textSize="20sp"/>
<EditText
android:id="#+id/total_ammount_input"
android:layout_height="wrap_content"
android:layout_width="150dp"
android:singleLine="true"
android:text="second Text"
android:padding="8dp"
android:gravity="center"/>
</LinearLayout>
<View
android:id="#+id/divideaftertotal"
android:layout_width="match_parent"
android:layout_height="1dp"/>
<LinearLayout
android:id="#+id/tens_view_left"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:id="#+id/firstcoloumn"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center">
<LinearLayout
android:layout_height="match_parent"
android:gravity="center"
android:layout_width="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/amount_rupee"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Num1"
android:textSize="25sp" />
<TextView
android:id="#+id/multiply_sign"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="X"
android:layout_centerVertical="true"
android:textSize="26sp"
android:layout_marginLeft="40dp" />
<TextView
android:id="#+id/multiple_digit"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Num2"
android:textSize="25sp"
android:layout_marginLeft="40dp" />
</LinearLayout>
</LinearLayout>
<SeekBar
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#+id/multiple_digit"
android:layout_marginTop="8dp"/>
</LinearLayout>
<TextView
android:id="#+id/amount_rupee"
android:layout_height="match_parent"
android:layout_width="100dp"
android:text="Num3"
android:textSize="25sp"
android:gravity="center"/>
</LinearLayout>
<View
android:id="#+id/divideaftertens"
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Two button one close to other at the bottom of RelativeLayout - Android - android

Related

How to adjust weight sum for horizontal gap between relativelayout

Actionbar overlapping Scrollbar inside fragment

How to align ImageButtons in a layout evenly

How can I align views justify in LinearLayout?

How to fill the layout to entire available width in Android

Categories

Resources