I am trying to create a layout where there is a RelativeLayout and two child inside it. The two children are TextView and ImageView. I want the text to start from the very left of the RelativeLayout and ImageView to very right of the RelativeLayout.
What properties I need to use?
The code is which is not working.
<RelativeLayout
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/android_btn_large"
android:gravity="center_vertical">
<TextView
android:id="#+id/txtButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Riverside Park"
android:textColor="#FFFFFF"
android:layout_alignParentLeft="true">
</TextView>
<ImageView
android:id="#+id/imgButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/plus_icon_480">
</ImageView>
</RelativeLayout>
The above works but stretch the button to fill_parent.
that should do the job
<RelativeLayout
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/android_btn_large"
android:gravity="center_vertical">
<TextView
android:id="#+id/txtButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imgButton"
android:text="Riverside Park"
android:textColor="#FFFFFF"
android:layout_alignParentLeft="true"></TextView>
<ImageView
android:id="#id/imgButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/txtButton"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/plus_icon_480">
</ImageView>
</RelativeLayout>
notice that in TextView there is +id, and in ImageView there is no "+"". However you should use linear layout with weight set to "1" on both views.
layout_alignparentleft="true" for the left hand child (TextView) and layout_alignparentright="true" for the right hand child (ImageView).
Related
RelativeLayout in Android Studio
i have a horizontal LinearLayout in which i have a RelativeLayout and i want another RelativeLayout to be below it and likewise throughout the xml file but the Layout is appearing at the immediate right of the previous Layout
i have tried to set the top margin of the RelativeLayout to a certain random value e.g 60sp it positions below the previous RelativeLayout but when i add TextView the TextView Does Not Show up in the design view
After adding textview to RelativeLayout
How do i position the Layout below the previous RelativeLayout ? and also how do i add TextViews to this RelativeLayout and display them ?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/calcbackground"
android:weightSum="1">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="53dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="SHIFT"
android:id="#+id/shifttextiew"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="DEG"
android:id="#+id/degtextview"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/shifttextiew"
android:layout_toEndOf="#+id/shifttextiew"
android:layout_marginLeft="31dp"
android:layout_marginStart="31dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="RAD"
android:id="#+id/radtextview"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/degtextview"
android:layout_toEndOf="#+id/degtextview"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="GRAD"
android:id="#+id/gradtextview"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/radtextview"
android:layout_toEndOf="#+id/radtextview"
android:layout_marginLeft="41dp"
android:layout_marginStart="41dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="12345678910"
android:id="#+id/calculationtextview"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/shifttextiew"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60sp">
</RelativeLayout>
</LinearLayout>
You told it to be at the right here: android:orientation="horizontal".
Make your LinearLayout vertical instead.
I see your code you don't add any orientation on root layout.if you don't add any orientation then it will work on horizontal.Please add the below code on your root layout.Hope it will work.
android:orientation="vertical"
make to seprate layout and using include layout tag place both layout according to your need
changes required in topmost viewgroup(LinearLayout)
android:orientation="vertical"
instead of
android:orientation="horizontal"
use orientation="vertical" property for your parent Linear layout
I am trying to setup a RelativeLayout where two TextView are shown on one line. The first TextView should be aligned to the left. The second TextView should be aligned to the right. If the second TextView text would expand to overlap the first TextView then I want to ellipsize the text in the middle. I don't want to ellipsize the first TextView.
This is what I have come up with. The problem is the second TextView is directly to the right of the first TextView instead of being aligned to the far right. It seems like I cannot use alignParentRight and toRightOf at the same time.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="[DetailedType]"/>
<TextView
android:id="#+id/Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/Left"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:ellipsize="middle"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="[CustomerName]"/>
</RelativeLayout>
The basic idea to achieve this id to add a dummy invisible view in the horizontal center of your RelativeLayout and the tell the left TextView to be to the left of it and the right TextView to be to the right of it... see below
About your problem with aligning it to the right, you should stretch the TextView to take half of the screen and then set android:gravity="right" on the TextView
<?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">
<View
android:id="#+id/dummy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/Left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/dummy"
android:text="[DetailedType]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/Right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/Left"
android:gravity="right"
android:ellipsize="middle"
android:singleLine="true"
android:text="[CustomerName]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</RelativeLayout>
But you can always use LinerLayout to the job
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/Left"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="[DetailedType]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<TextView
android:id="#+id/Right"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="middle"
android:singleLine="true"
android:text="[CustomerName]"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
From what I understand you only miss android:gravity="right" on your right view.
I want to create layout like at picture but i don't have clue at all how to make like that..
Does anyone can give me a clue or alternative how to do that ?
Split it like this.
Imageview and first textview in a linearlayout Horizontal.
and then this linearlayout Horizontal and second textview in a linear layout vertical.
One way to do this could be to lay the TextView and then overlay the ImageView on it. I think a RelativeLayout with the TextView defined first and followed by the ImageView might do the trick. You can toggle the visibility of the ImageView but would need to ensure that any text written to the TextView is written after taking into account width of the ImageView so as to not obscure any text.
You can try adding two textviews in a relative layout and in addition to that an imageview.
This might help you to get started.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/item_generator"
android:background="#FF000000">
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:textColor="#FFF"
android:textSize="18sp" />
<TextView
android:id="#+id/item_title_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_marginTop="16dp"
android:textColor="#color/blue"
android:textSize="16sp" />
<TextView
android:id="#+id/item_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/item_title"
android:layout_below="#+id/item_title"
android:textColor="#888"
android:textSize="14sp" />
<ImageView
android:id="#+id/item_right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_marginRight="40dp"
android:padding="0dp"
android:contentDescription="#string/hello_world" />
</RelativeLayout>
I'm a noob to android development and I am having issues constructing a layout. I have a relative layout containing a textview and a linear layout containing two checkboxes. I want the textView to appear to the left and the linear layout to appear on the right of the linear layout flush with the edge. Currently, the textview and linearlayout appear on top of each other. Any help is greatly appreciated.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:text="Rotated Shelf: "
android:layout_gravity="center_vertical"/>
<LinearLayout
android:id="#+id/rotated"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentRight="true">
<CheckBox
android:id="#+id/rotatedshelfYES"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yes"
android:layout_toLeftOf="#+id/rotatedshelfNO"
/>
<CheckBox
android:id="#+id/rotatedshelfNO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="75dp"
android:text="No"
android:layout_alignParentRight="true" />
</LinearLayout>
</RelativeLayout>
try like this your textview write with in linear-layout and set android:layout_weight="" it working nice
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/rotated"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentRight="true" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight=".5"
android:paddingLeft="5dp"
android:text="Rotated Shelf: " />
<CheckBox
android:id="#+id/rotatedshelfYES"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:text="Yes" />
<CheckBox
android:id="#+id/rotatedshelfNO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:text="No" />
</LinearLayout>
</RelativeLayout>
on the LinearLayout add android:layout_toRightOf="#+id/textView2"
If you want to align the right edge of your TextView with the left edge of your LinearLayout (i.e. TextView to the left of LinearLayout) you should use
android:layout_toLeftOf="#+id/rotated"
in your TextView properties.
Use you have to set android:layout_width in linear layout equal to wrap_content not match_parent since match_parent is used when we want to equal the width/height as the parent of the widget/container and wrap_content as name suggest requires space only to write the caption of view/container, no extra space required.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0.0dip"
android:layout_marginBottom="1.0dip"
android:layout_marginRight="1.0dip"
android:layout_weight="1.0"
android:background="#drawable/main_buttons_light"
android:onClick="btnProfileSettingsClick" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:gravity="left"
android:paddingLeft="8.0dip"
android:paddingTop="8.0dip"
android:text="#string/activity_main_button_profile_settings"
android:textSize="12.0sp"
android:color="#color/maintitletext" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left"
android:gravity="left"
android:paddingBottom="10.0dip"
android:paddingLeft="8.0dip"
android:src="#drawable/profile_settings" />
</LinearLayout>
TextViewis is in top and ImageView is in bottom but image is positioned in right place instead of left. How can i set it one after another and in left site of the screen?
try this :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_alignParentBottom="true"/>
You can use RelativeLayout instead of LinearLayout as a parent view of your textView and imageView and set their
layout_alignParentLeft
layout_alignParentRight
layout_alignParentTop
layout_alignParentBottom
properties.
Also if you use RelativeLayout as parent view, you can use
layout_toLeftOf
layout_toRightOf
layout_above
layout_below
properties to add subviews one after another.
EDIT:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:id="#+id/myText"
android:text="Click Me" />
<ImageView
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:id="#+id/myImage" />
</RelativeLayout>
If you wish to keep linear layout, just have to change the orientation. Add this to the LinearLayout xml:
android:orientation="vertical"
For it to align on the left, if it's the root layout, just add
android:gravity="left"
This will make all child aligned left.
Otherwise, if the LinearLayout is a child of another layout add:
android:layout_alignParentLeft="true"