How can i implement this layout? - android

I have a layout that has 3 buttons. And I want to locate two textviews to each imageview. How can i implement this layout? AbsoluteLayout is enough for my needs?
Here is my layout part.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_gravity="center_horizontal"
android:weightSum="2" >
<ImageView
android:id="#+id/btn1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/gray" />
<ImageView
android:id="#+id/btn2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/gray" />
<ImageView
android:id="#+id/btn3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/gray" />
</LinearLayout>
I want to implement this layout. Boxes are imageview.
a busy cat http://img824.imageshack.us/img824/2385/layoutrq.jpg

Using Linear Layout you can do like this.
<?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:weightSum="3"
android:background="#F0F0F0" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />
</LinearLayout>
</LinearLayout>

Use RelativeLayout instead of ImageView :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#000">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:text="TextView2" />
</RelativeLayout>
I would recommend to create a separate layout and class for it for reusing.

use Button instead of ImageView.

Use the Button instead of ImageView, You probably want a custom button background?
Use this:
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/album_icon"
android:background="#drawable/round_button" />
Or this to still use the image file:
ImageView iv = (ImageView)findViewById(R.id.ImageView01);
iv.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
}
});

Is this what you need?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/btn1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_alignParentLeft="true"
android:background="#drawable/gray"
android:orientation="vertical">
<TextView
android:id="#+id/txt1"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Label 1" />
<TextView
android:id="#+id/txt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Label 2" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/btn2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_toRightOf="#id/btn1"
android:background="#drawable/gray"
android:orientation="vertical">
<TextView
android:id="#+id/txt3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:text="Label 3" />
<TextView
android:id="#+id/txt4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Label 4" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/btn3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_toRightOf="#id/btn2"
android:background="#drawable/gray"
android:orientation="vertical">
<TextView
android:id="#+id/txt5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:text="Label 5" />
<TextView
android:id="#+id/txt6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Label 6" />
</RelativeLayout>
</RelativeLayout>
Edit: Check now. You can set the background of the relativeLayouts to whatever you wanted in the imageviews and set a clicklistener so they act like buttons.

Related

Binding of two TextViews on vertical

There is a RelativeLayout with a nested LinearLayout that contains two TextViews positioned horizontally relative to each other. This is DiscountAmount and AmountWithDiscount.
I need to keep the DiscountAmount and AmountWithDiscount always at the same level vertically, for this I put the android property in LinearLayout: android:layout_below = "# + id / textViewRowQuantity". But if the Name is too long and takes three lines, then it will go to DiscountAmount. If Name takes no more than 2 lines, then all is well.
Tell me, please, how can I solve this problem?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayoutSaleListRow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:orientation="horizontal"
android:padding="5dp" >
<ImageView
android:id="#+id/imageViewRemoveRowSale"
android:layout_width="#dimen/size_30px"
android:layout_height="#dimen/size_30px"
android:layout_alignParentLeft="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:src="#drawable/ic_action_remove"/>
<RelativeLayout
android:id="#+id/relativeLayoutIncQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/imageViewRemoveRowSale"
android:layout_toLeftOf="#+id/imageViewEditRowSale"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewRowPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewRowPrice"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/textViewRowPrice"
android:text="TextView" />
<LinearLayout
android:id="#+id/layoutDiscount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewRowQuantity"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewRowDiscountAmount"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowAmountWithDiscount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/imageViewEditRowSale"
android:layout_width="#dimen/size_45px"
android:layout_height="#dimen/size_45px"
android:layout_marginTop="5dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_action_edit" />
Add result:
Implemented through ConstraintLayout. Thanks to all.
You can limit the number of lines in the TextView to 2 by adding this lines:
android:ellipsize="end"
android:lines="2"
End ellipsize end means if the text is so long then it will be replaced with three dots ...
if you want to show AmountWithDiscount is below to discount then change liner layout orientation like below .
android:orientation="vertical"
Try this :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayoutSaleListRow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:orientation="horizontal"
android:padding="5dp" >
<ImageView
android:id="#+id/imageViewRemoveRowSale"
android:layout_width="#dimen/size_30px"
android:layout_height="#dimen/size_30px"
android:layout_alignParentLeft="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:src="#drawable/ic_action_remove"/>
<RelativeLayout
android:id="#+id/relativeLayoutIncQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/imageViewRemoveRowSale"
android:layout_toLeftOf="#+id/imageViewEditRowSale"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewRowPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewRowPrice"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/textViewRowPrice"
android:text="text"
android:minLines="2"/>
<LinearLayout
android:id="#+id/layoutDiscount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewRowName"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewRowDiscountAmount"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowAmountWithDiscount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/imageViewEditRowSale"
android:layout_width="#dimen/size_45px"
android:layout_height="#dimen/size_45px"
android:layout_marginTop="5dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_action_edit" />
</RelativeLayout>
Hope this helps
make some change in liner layout..
<LinearLayout
android:id="#+id/layoutDiscount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewRowQuantity"
android:orientation="horizontal"
android:weightSum="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.3">
<TextView
android:id="#+id/textViewRowDiscountAmount"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:singleLine="true"
android:text="TextViewsdfsdfdsgfd" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.7">
<TextView
android:id="#+id/textViewRowAmountWithDiscount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:singleLine="true"
android:layout_marginRight="5dp"
android:text="textview" />
</LinearLayout>
</LinearLayout>
You can try out this below code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayoutSaleListRow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:orientation="horizontal"
android:padding="5dp" >
<ImageView
android:id="#+id/imageViewRemoveRowSale"
android:layout_width="#dimen/size_30px"
android:layout_height="#dimen/size_30px"
android:layout_alignParentLeft="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:src="#drawable/ic_action_remove"/>
<RelativeLayout
android:id="#+id/relativeLayoutIncQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/imageViewRemoveRowSale"
android:layout_toLeftOf="#+id/imageViewEditRowSale"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rr_layout">
<TextView
android:id="#+id/textViewRowPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textViewRowPrice"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/textViewRowPrice"
android:text="TextView" />
</RelativeLayout>
<LinearLayout
android:id="#+id/layoutDiscount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/rr_layout"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewRowDiscountAmount"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textViewRowAmountWithDiscount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/imageViewEditRowSale"
android:layout_width="#dimen/size_45px"
android:layout_height="#dimen/size_45px"
android:layout_marginTop="5dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_action_edit" /></RelativeLayout>

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 can I achieve this listview row layout in XML?

I can't seem to get the date positioned appropriately in the layout. I am trying to achieve something like this:
I need to have the date appear below the first line of the notifications. I'm just not sure how to incorporate a vertical linear layout here properly.
Here's the XML code I have so far:
<?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:paddingBottom="10dp"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/user_avatar_notification"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="left"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp" />
<TextView
android:id="#+id/post_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="username"
android:textSize="16dp" />
<TextView
android:id="#+id/post_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="mentioned you in a"
android:textColor="#color/comment_like_grey" />
<TextView
android:id="#+id/notification_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="not_type"
/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="date of notification"
android:textColor="#color/comment_like_grey"
/>
</LinearLayout>
Try something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/user_avatar_notification"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="left"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/post_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="username"
android:textSize="16dp" />
<TextView
android:id="#+id/post_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="mentioned you in a"
android:textColor="#color/comment_like_grey"/>
<TextView
android:id="#+id/notification_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="not_type" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="date of notification"
android:textColor="#color/comment_like_grey"/>
</LinearLayout>
</LinearLayout>

Android how to design the xml about the UI

I need to design the xml about below layout.
I try to use RelativeLayout to design, but I don't know
how to adjust the imageVivew3 in RelativeLayout.
Have anyone can teach me how to adjust the xml?
or have you nice xml design about this layout?
thank you very much.
my xml is below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative_bg"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:layout_centerHorizontal="true"
android:visibility="visible"
android:layout_margin="0dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:visibility="visible"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:visibility="visible"
android:layout_centerVertical="true"
android:layout_below="#+id/imageView3"
android:layout_alignParentRight="true"
/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:layout_alignTop="#+id/textView1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="txt1"
android:id="#+id/textView1"
android:textColor="#color/white"
android:textSize="#dimen/common_size_large"
android:layout_below="#+id/imageView3"
android:layout_alignParentRight="true"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="txt2"
android:id="#+id/textView2"
android:textColor="#color/white"
android:layout_below="#+id/textView1"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
Try to LinearLayout instead of RelativeLayout..
And also use android:layout_weight atttribute ...code sample are given below... put this
code to your xml.
<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="#android:color/white"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight=".75"
android:layout_marginTop="5dp"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="2"
android:layout_gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/gerder"
android:textSize="12sp"
android:textStyle="bold"
android:contentDescription="#string/app_name"
android:layout_gravity="center"
android:paddingLeft="10dp"
android:gravity="center"
android:textColor="#android:color/black"
android:fontFamily="#string/providerFontFamily"
/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<RadioGroup
android:id="#+id/radioGender"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
>
<RadioButton
android:id="#+id/radioMale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/providerGenderMale"
android:checked="true" />
<RadioButton
android:id="#+id/radioFemale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/providerGenderFemale" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="2"
android:layout_gravity="center"
>
<TextView
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/providerFontFamily"
android:text="#string/age_range"
android:gravity="left"
android:textSize="12sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_gravity="center"
/>
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginRight="15dp"
android:prompt="#string/country_prompt"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Android LinearLayout: Layout inside a Layout

I am confused by Android layout design. I want to achieve the layout in the following image:
But the code below is producing something like this image:
My code
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="50sp"
android:layout_below="#+id/view"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/bg_shadow"
android:animateLayoutChanges="true"
android:layout_marginTop="5dp"
android:id="#+id/detailsLay">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/repeat"
android:id="#+id/repeatCheckBox"
android:longClickable="false"
android:textColor="#android:color/background_light"
android:paddingTop="15sp"
android:paddingRight="15sp"
android:paddingLeft="1sp"
android:paddingBottom="15sp" />
<TextView
android:layout_width="30dp"
android:layout_height="20sp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sat"
android:id="#+id/satTextView"
android:layout_gravity="center_vertical|right"
android:textColor="#android:color/holo_orange_light"
android:layout_marginLeft="2sp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/arrowDown"
android:src="#android:drawable/arrow_down_float"
android:layout_gravity="center_vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/everyday"/>
</LinearLayout>
</LinearLayout>
This is just a Sample Xml learn from 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="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="CheckBox" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
Use attributes like weight and user orientation of linearlayout.

Categories

Resources