I'm laying out a row for use in a ListView and I need a little help. The row will look like this:
Below is what I have so far, the highlight bg is not showing up and the text won't align center (sticks to the top).
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
android:background="#color/grey">
<!-- shine -->
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imgShine"
android:background="#color/shine"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1" />
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:id="#+id/ll"
android:layout_gravity="center_vertical">
<!-- cal graphic -->
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp">
<!-- cal bg -->
<ImageView
android:id="#+id/imageView1"
android:src="#drawable/cal"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true" />
<!-- month -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tvMonth"
android:textSize="11sp"
android:layout_marginLeft="11dp"
android:layout_marginTop="10dp"
android:textColor="#drawable/list_cal_selector" />
<!-- day -->
<TextView
android:id="#+id/tvDay"
android:textSize="23sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvMonth"
android:layout_marginTop="2dp"
android:layout_centerHorizontal="true"
android:textColor="#drawable/list_cal_selector" />
</RelativeLayout>
<!-- text and button graphic -->
<RelativeLayout
android:id="#+id/rl2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:layout_gravity="center_vertical">
<!-- team name -->
<TextView
android:id="#+id/tvTeam"
android:textSize="23dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="0dp"
android:textColor="#drawable/list_text_selector" />
<TextView
android:id="#+id/tvTime"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTeam"
android:textColor="#drawable/list_text_selector" />
<TextView
android:id="#+id/tvStation"
android:textSize="12sp"
android:paddingLeft="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTeam"
android:layout_toRightOf="#+id/tvTime"
android:textColor="#drawable/list_text_selector" />
<!-- add button -->
<ImageView
android:id="#+id/imgAddBtn"
android:src="#drawable/btn"
android:layout_height="wrap_content"
android:layout_width="60dp"
android:scaleType="fitCenter"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:layout_alignParentRight="true"
android:padding="10dp" />
<!-- divider -->
<ImageView
android:id="#+id/imgDivider"
android:src="#drawable/divider"
android:layout_height="fill_parent"
android:layout_width="2dp"
android:layout_toLeftOf="#id/imgAddBtn"
android:cropToPadding="false" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>
I would use just one RelativeLayout. It will avoid the use of various Layouts and
its easier to place componentes on screen.
edit: This solution works, but I don't know if it's the best:
<?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="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_weight="0.25"/>
<ImageView
android:layout_weight="0.5"
android:layout_height="0dp"
android:layout_width="50dp"
android:background="#dedede"/>
<View
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_weight="0.25"/>
</LinearLayout>
<!--
...
-->
</RelativeLayout>
Look at this tutorials you can choose which layout is best. Every layout has own merits and demerits. Only one that layout is not best in android but in most cases Relative layout easy to use because it has move to easy any where of UI.
just like your matches problems, tutorials
http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html
you can see more layout of in developer.android.con. which has to learn more simply way. here some Best links you can see various layouts.
http://developer.android.com/resources/tutorials/views/hello-relativelayout.html
http://developer.android.com/guide/topics/ui/layout-objects.html
http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-relative-layouts/
http://www.learn-android.com/2010/01/05/android-layout-tutorial/
Check this out
![<?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="35dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:scaleType="centerInside"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="4"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Row 1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Row 2" />
<TextView
android:layout_marginLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Row 3" />
</LinearLayout>
</LinearLayout>
<View android:layout_height="match_parent"
android:layout_width="2dp"
android:background="#fff"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:scaleType="centerInside"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Related
I have three 3 Relative layout in a LinearLayout.
First Relative layout contains Tabhost.
All Tabhost content should be aligned above the 2nd RelativeLayout at all times.
The problem is the content is always viewed as behind the 3rd and 2nd Relative Layout.
How can it make as always above the 2nd RelativeLayout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#FFFFFFFF">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#color/background_floating_material_dark">
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFFFF">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:gravity="top"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="62dp"/>
</android.support.v4.app.FragmentTabHost>
<RelativeLayout
android:id="#+id/rel_for_sip_active"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#19c031"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_above="#+id/relativeLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Online"
android:id="#+id/online_offline"
android:layout_marginLeft="39dp"
android:layout_marginStart="39dp"
android:textColor="#afafaf"
android:textStyle="bold"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="On going call....."
android:id="#+id/textView12"
android:layout_marginLeft="39dp"
android:layout_marginStart="39dp"
android:textColor="#color/white"
android:textStyle="bold"
android:visibility="gone"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="00:00:00"
android:id="#+id/callcounter"
android:textColor="#afafaf"
android:textStyle="bold"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/unmute"
android:onClick="Unmute"
android:src="#mipmap/ic_action_mute"
android:visibility="gone"
android:background="#android:color/transparent"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mute"
android:onClick="Mute"
android:src="#mipmap/ic_action_mute_active"
android:background="#android:color/transparent"
android:visibility="gone"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/demute"
android:src="#mipmap/ic_action_mute_inactive"
android:background="#android:color/transparent"
android:visibility="visible"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/background_floating_material_dark"
style="#style/Theme.Callbox"
android:id="#+id/relativeLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/action_bar_addtarget"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/ic_action_call"
android:background="#drawable/bg_btn_btm_actionbar"
android:visibility="visible"
android:onClick="Call" />
<ImageView
android:id="#+id/action_bar_addtarget_end"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:background="#drawable/bg_btn_btm_actionbar"
android:src="#drawable/ic_action_end_call"
android:visibility="gone"
android:onClick="endCall" />
<ImageView
android:id="#+id/action_bar_dialpad"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/ic_action_dialer"
android:background="#drawable/bg_btn_btm_actionbar"
android:visibility="visible"
android:onClick="showDialpad"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:id="#+id/action_bar_filter"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="#string/dummy"
android:background="#drawable/bg_btn_btm_actionbar"
android:visibility="visible"
android:scaleType="fitCenter"
android:onClick="showCallResult"
android:src="#drawable/ic_action_process_save"
android:layout_below="#+id/action_bar_addtarget_end"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</RelativeLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relativeLayout"
android:visibility="gone"
android:id="#+id/fl_slide_pop">
</FrameLayout>
Several things are bad in your design.
You have too many Layouts, I tried to remove as much as possible some of them.
Also you have 3 ImageButtons for mute/unmute/demute where only one can be set an programmatically changed.
Inflating a view is kind of heavy on android if you don't optimized it.
There is a tool into the SDK that help you to see your layout hierarchy in order to see how to optimized it
You can try to do something simpler like this example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- here is the bottom layout which contains your 3 buttons -->
<LinearLayout
android:id="#+id/third_layout"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#ff0000"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<!-- Here is the equivalent of the 2nd relative layout, but you just have to show a image
button or a Text view, you don't have to use another relative layout -->
<ImageButton
android:id="#+id/mute"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_above="#id/third_layout"
android:background="#android:color/holo_green_dark"
android:src="#android:drawable/ic_btn_speak_now" />
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_above="#id/third_layout"
/>
<!-- finally the 1st layout which is above the second to the top of its parent -->
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/mute"
android:layout_alignParentTop="true"
android:background="#android:color/holo_blue_bright">
<!-- TAB Widget -->
</android.support.v4.app.FragmentTabHost>
</RelativeLayout>
I encourage you to use less layout in order to have a smoother application.
This is what I am require to do(The menu):
and this is what I have achieved so far:
Please see the horizontal line below an image within the list.I cannot make my screen-shot similar to the requirement.
Code:
popupmenurow.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"//this is the image icon
android:layout_margin="10dp"
android:contentDescription="#null" />
<ImageView//this is the horizontal line
android:contentDescription="#null"
android:id="#+id/horizontalline"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_below="#+id/imgmenuicon"
android:layout_alignLeft="#+id/imgmenuicon"
android:layout_alignRight="#+id/imgmenuicon"
android:background="#4d4b56" />
</RelativeLayout>
<ImageView
android:contentDescription="#null"
android:id="#+id/verticalline"
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="15dp"
android:background="#4d4b56" />
<TextView
android:id="#+id/tvmenutitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:text="Hello"
android:textColor="#color/menutextcolor"
android:textSize="16sp" />
</LinearLayout>
and here is the list popup_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/popup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical" >
<ListView
android:id="#+id/list_slide"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:choiceMode="singleChoice"
android:divider="#null"
/>
</LinearLayout>
What shall I do to make the horizontal line below the imageview,similar to that of my requirement(The image on the top)?
If I remove
android:layout_alignLeft="#+id/imgmenuicon"
android:layout_alignRight="#+id/imgmenuicon"
then the line is not showing up.Also I understand that the margins occuring to the left and right of the horizontal line is due to android:layout_margin="10dp" within the imageview.But I cannot find a solution.
ANSWER
Thank you all for your precious time.Finally I have solved the problem.The solution of M090009 was close but I couldn't make it.Finally thanks to Vijay for giving me the idea about the background.
What I have done is to cut an image like this:
and set that image as the background of the relative layout within which my menu-icons resides.
Here is the full code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/rl_image"
android:background="#drawable/line_box"
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imgmenuicon"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:layout_centerHorizontal="true"
android:scaleType="centerInside" />
<!-- <View
android:id="#+id/horizontalline"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_alignLeft="#+id/imgmenuicon"
android:layout_alignRight="#+id/imgmenuicon"
android:layout_below="#+id/imgmenuicon"
android:background="#4d4b56"
android:layout_marginTop="5dp"
android:padding="10dp"
android:contentDescription="#null" /> -->
</RelativeLayout>
<ImageView
android:id="#+id/verticalline"
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#4d4b56"
android:contentDescription="#null" />
<TextView
android:id="#+id/tvmenutitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_gravity="center_vertical"
android:paddingLeft="5dp"
android:text="Hello"
android:textColor="#color/menutextcolor"
android:textSize="16sp" />
</LinearLayout>
and here is the output:
Well you can remove the margin on the icon image and set its scaleType to center_corp as follows
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"//this is the image icon
android:contentDescription="#null"
android:scaleType="center_corp"/>
If the above solutions not working mean then try this. Because all the solutions are good.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#drawable/bordercolor" >
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:contentDescription="#null" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.75" >
<TextView
android:id="#+id/tvmenutitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
android:text="Hello"
android:textColor="#android:color/black"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
Change imgmenuicon's attr:
android:layout_margin="10dp"
to
android:padding="10dp"
BTW, the line should use <View ... android:background.../> instead of <ImmageView ... />
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_menu_row_cont"
android:layout_width="270dp"
android:layout_height="78dp"
android:background="#ffffff"
android:orientation="horizontal" >
<RelativeLayout
android:layout_gravity="center_vertical|left"
android:id="#+id/rl_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgmenuicon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:src="#android:drawable/alert_dark_frame"
android:contentDescription="#null" />
<View
android:contentDescription="#null"
android:id="#+id/horizontalline"
android:layout_width="100dp"
android:layout_height="1dp"
android:layout_below="#id/imgmenuicon"
android:background="#000" />
<View
android:contentDescription="#null"
android:id="#+id/verticalline"
android:layout_width="1dp"
android:layout_toRightOf="#+id/horizontalline"
android:layout_height="fill_parent"
android:background="#4d4b56" />
</RelativeLayout>
<TextView
android:id="#+id/tvmenutitle"
android:layout_gravity="center_vertical|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Hello"
android:textSize="18sp" />
Try this and let me know!!!:D
Remove the Imageview for that divider and add this:
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/static_account"
android:background="#color/divider"/>
<?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="90dip"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/rowcontact_txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:text="Usama Sadiq"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rowcontact_imgLocationIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_below="#+id/rowcontact_txtName"
android:layout_marginLeft="10dip" />
<TextView
android:id="#+id/rowcontact_txtLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rowcontact_txtName"
android:layout_toRightOf="#+id/rowcontact_imgLocationIcon"
android:text="Dubai"
android:textColor="#898788"
android:textSize="11.5dp" />
<ImageView
android:id="#+id/rowcontact_imgIcon"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignBottom="#+id/rowcontact_txtLocation"
android:layout_marginLeft="94dp"
android:layout_toRightOf="#+id/rowcontact_txtName" />
</RelativeLayout>
</RelativeLayout>
i am trying to create layout for list-view item but i am not able to fix position of image and text with three different Position please tell me solution how to fix it. i have to create listviow item i am able to display list-view but like given screen
i have all icon an all but am unable to fix potion of text-view and image view like given screen
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="2"
android:layout_margin="5dp"
>
<TextView
android:id="#+id/rowcontact_txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Usama Sadiq"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<TextView
android:id="#+id/rowcontact_txtLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rowcontact_txtName"
android:layout_toRightOf="#+id/rowcontact_imgLocationIcon"
android:text="Dubai"
android:textColor="#898788"
android:textSize="11.5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
i want to put five button in bottom but all button should be with same space means
below is image
Here you can see that second and third image is not in center below is my code i know that i have put padding but still my problem is not solving, i have tried using linearlayout also in that i have done by using weight=1 and width =0 but button is stretching
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/wall"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:drawingCacheQuality="high"
android:scaleType="fitXY" />
<Button
android:id="#+id/butRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#drawable/check_right" />
<Button
android:id="#+id/butfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/fvrt1" />
<Button
android:id="#+id/butLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:background="#drawable/check_left" />
<Button
android:id="#+id/butSetWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="39dp"
android:layout_toRightOf="#+id/butLeft"
android:background="#drawable/chek_wallpaper" />
<Button
android:id="#+id/butSetRingTone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginRight="36dp"
android:layout_toLeftOf="#+id/butRight"
android:background="#drawable/check_ringtone" />
can anybody help me?
I always use LinearLayout to achieve this and instead Buttons I'm using ImageView.
I have tried below code it's worked for me try this, just replace with your RelativeLayout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" >
<ImageView
android:id="#+id/butLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check_left" />
<View
android:id="#+id/butOne"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/check_right" />
<ImageView
android:id="#+id/butSetWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/chek_wallpaper" />
<View
android:id="#+id/butTwo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/check_right" />
<ImageView
android:id="#+id/butfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fvrt1" />
<View
android:id="#+id/butThree"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/check_right" />
<ImageView
android:id="#+id/butSetRingTone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check_ringtone" />
<View
android:id="#+id/butFour"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/check_right" />
<ImageView
android:id="#+id/butRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check_right" />
</LinearLayout>
out put will be generated as you wish
Its a bit dirty solution but It'll work :
<?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="horizontal" >
<LinearLayout
android:id="#+id/aaaa"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/butRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:minWidth="48dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/bbbb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/butfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:minWidth="48dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/cccc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:minWidth="48dp"
android:orientation="vertical" >
<Button
android:id="#+id/butLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:minWidth="48dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ddd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/butSetWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:minWidth="48dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/gggg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/butSetRingTone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:minWidth="48dp" />
</LinearLayout>
</LinearLayout>
Wrap the buttons in a LinearLayout and put spacings between each button (i also added one at the beginning and one after the last one, remove them if you don't want it).
assign a layout_weight for each spacing, don't set a weightSum on the LinearLayout.
Enjoy.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/wall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawingCacheQuality="high"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<!-- this is for the spacing -->
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/butRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/check_right" />
<!-- this is for the spacing -->
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/butfav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/fvrt1" />
<!-- this is for the spacing -->
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/butLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/check_left" />
<!-- this is for the spacing -->
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/butSetWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/chek_wallpaper" />
<!-- this is for the spacing -->
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/butSetRingTone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/check_ringtone" />
<!-- this is for the spacing -->
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</FrameLayout>
Why all of you doing trick with code. In android coding there is option available to give space between item.
<Space
android:id="#+id/space1"
android:layout_below="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="40dp"
/>
Just use this whenever you want. simple. hope this will help you.
Please share code to achieve the layout of the screen shown in the below link. The text should be in center of the two images and all these components can be dynamic.
(https://docs.google.com/file/d/0B9n2IhVep_QeNDFKaWFHVERQOVk/edit?usp=sharing)
https://www.dropbox.com/s/2j4bpwdmv0wgesg/Untitled%20Diagram.png
Hope this works
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="TextView" />
</LinearLayout>
An easier way to do this is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/yourBackgroundDrawableBorder"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:background="#drawable/yourBackgroundDrawableBorder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"
android:padding="xxdp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/global_menu_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:text="Textview" />
</RelativeLayout>
You need to add the custom drawables for the shapes you desire for your views..and yes obviously this is a very generic way to do it. You obviously have to edit some properties or add some to suit your needs. The other way is to use LinearLayout and the android:layout_weight="1" property to make your imageviews similar in size.
<?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:gravity="center"
android:orientation="vertical"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:layout_marginLeft="10dp"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="3"
android:layout_marginTop="10dp"
android:text="Text" />
</LinearLayout>