I'm struggling with an Android layout here, this seems like it should be so simple, but no joy, a simple linear layout results in the image shown:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:minWidth="25px"
android:minHeight="100dp">
<TextView
android:text="Last Game"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:gravity="center_horizontal"
android:background="#003300" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="80dp"
android:id="#+id/imageView1"
android:layout_gravity="left"
android:layout_height="80dp" />
<TextView
android:textColor="#000000"
android:text="WR"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/textView2"
android:gravity="right"
android:paddingRight="5dp" />
<View
android:background="#000000"
android:layout_width="1dp"
android:layout_height="fill_parent"
android:id="#+id/view1"
android:layout_gravity="center_horizontal" />
<TextView
android:textColor="#000000"
android:text="LR"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/textView3"
android:gravity="left"
android:paddingLeft="5dp" />
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_gravity="right"
android:layout_width="80dp"
android:id="#+id/imageView1"
android:layout_height="80dp" />
</LinearLayout>
</LinearLayout>
What I want, is the Left image to be at the left margin (left justified)
The Right image at the right margin (right justified)
the Vertical bar to always be centered
And the WR to be right justified close to the center
And the LR to be left justified close to the center.
Should I use Relative Layout?
I would. You can use
android:layout_alignParentLeft="true"
and
android:layout_alignParentRight="true"
for the images, respecitvely. Then use
android:layout_centerHorizontal="true"
for your line and
android:layout_toLeftOf="id" // enter id of line
and
android:layout_toRightOf="id" // enter id of line
to place your TextViews on either side of the line and add padding as needed
You need FrameLayout, that suits your requirement best
Use below layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:minWidth="25px"
android:minHeight="100dp">
<TextView
android:text="Last Game"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:gravity="center_horizontal"
android:background="#003300" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_width="80dp"
android:id="#+id/imageView1"
android:layout_gravity="left"
android:layout_height="80dp" />
<TextView
android:textColor="#000000"
android:text="WR"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/textView2"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="25dp"
/>
<View
android:background="#000000"
android:layout_width="1dp"
android:layout_height="80dp"
android:id="#+id/view1"
android:layout_gravity="center_horizontal" />
<TextView
android:textColor="#000000"
android:text="LR"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/textView3"
android:layout_gravity="center_horizontal"
android:layout_marginRight="25dp"
/>
<ImageView
android:src="#android:drawable/ic_menu_gallery"
android:layout_gravity="right"
android:layout_width="80dp"
android:id="#+id/imageView1"
android:layout_height="80dp" />
</FrameLayout>
</LinearLayout>
RelativeLayout. Make the left image layout_alignParentLeft=true. Make the center line layout_centerHorizontal=true. Make the WR layout_align_toLeftOf="id of line" and make have gravity="right". Repeat on the other side with opposite directions.
Related
How to customize FrameLayout, I have to make screen like this:
and i have made this :
So now i want to know, How can i achieve above Layout
How to show icon on top, like in above screen (Path)
How to place text above circles, like in above screen (Dark Text: Remember Life) (Light Text: Instantly ....)
How to place buttons below circles, like in above screen (Register & Login)
Here is my XML, in which i am using FrameLayout, see below:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
</FrameLayout>
Finally, I achieved my target, I used both the Layouts [Relative Layout and Linear Layout] to organize widgets, see complete XML :
circle_layout.xml:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView2"
android:layout_centerHorizontal="true"
android:text="Remember Life"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/viewflowindic"
android:layout_centerHorizontal="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:padding="5dp"
android:text="Instantly search memories of friends, season, birthdays, and more"
android:textAppearance="?android:attr/textAppearanceSmall" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp" >
<Button
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight="1"
android:text="Register"
android:textColor="#000000" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Login"
android:textColor="#000000" />
</LinearLayout>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayout1"
android:layout_centerHorizontal="true"
android:padding="20dp"
app:inactiveType="stroke" />
</RelativeLayout>
And look at this awesome screenshot:
Use RelativeLayout instead FrameLayout. You will be more free with elements positions.
Relative Layout
Something like this you can do it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:sidebuffer="3" />
<View
android:id="#+id/center"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/button_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/center"
android:padding="10dp"/>
<Button
android:id="#+id/button_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/center"
android:padding="10dp"/>
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_register"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/viewflowindic"
android:layout_centerHorizontal="true"
android:text="description"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/description"
android:layout_centerHorizontal="true"
android:text="title"/>
</RelativeLayout>
btw use match_parent instead fill_parent.
Use RelativeLayout to organize views. For implementing view pager indicator try this link
https://github.com/JakeWharton/Android-ViewPagerIndicator
Sample
<?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">
//You can put an image view or text view to show your app name
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Path"
android:id="#+id/title"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="74dp"/>
**// Try view pager indicator here.**
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:weightSum="2"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:layout_weight="1"
android:id="#+id/button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_weight="1"
android:id="#+id/button2"/>
</LinearLayout>
</RelativeLayout>
I have arabic text, therefore I set gravity to right in order to start text from right side. Text starts from right now. But another issue is text starts to render from the top of the page. But I need to vertically center the text.
Although I tried several variations I couldnt make it vertically center.
Here is the sample of my xml file.
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="23dp"
android:gravity="right"
android:padding="#dimen/padding_maintextview"
android:text="#string/text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
</LinearLayout>
Problem is with above textview.
Here I have put whole xml file.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/page1background"
android:paddingRight="#dimen/padding_large" >
<TextView
android:id="#+id/textView1"
android:layout_width="196dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:paddingTop="#dimen/padding_Title_Top"
android:text="#string/text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<View
android:id="#+id/view1"
android:layout_width="fill_parent"
android:layout_height="5dp" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linearLayout2"
android:layout_below="#id/linearLayout1"
android:layout_gravity="center"
android:padding="#dimen/padding_maintextview" >
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="23dp"
android:gravity="right"
android:padding="#dimen/padding_maintextview"
android:text="#string/text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<View
android:id="#+id/view2"
android:layout_width="fill_parent"
android:layout_height="100dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<ImageButton
android:id="#+id/back_arrow"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:layout_marginRight="45dp"
android:layout_weight=".5"
android:background="#drawable/backbut"
android:contentDescription="#string/Description"
android:onClick="onClickBtn"
android:src="#drawable/backarrowpress" />
<ImageButton
android:id="#+id/copyButton"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_weight=".5"
android:background="#drawable/copy"
android:contentDescription="#string/Description"
android:onClick="onClickBtn" />
</LinearLayout>
</RelativeLayout>
Can anybody show me where I have done the mistake? I think problem is clear. If not tell me in comments.
Herewith I have appended updated code after review your answers.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/page1background"
android:paddingRight="#dimen/padding_large" >
<TextView
android:id="#+id/textView1"
android:layout_width="196dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:paddingTop="#dimen/padding_Title_Top"
android:text="#string/text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:gravity="center_horizontal"
android:orientation="vertical" >
<View
android:id="#+id/view1"
android:layout_width="fill_parent"
android:layout_height="5dp" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/linearLayout2"
android:layout_below="#id/linearLayout1"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:padding="#dimen/padding_maintextview" >
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_marginBottom="23dp"
android:gravity="center_vertical|right"
android:padding="#dimen/padding_maintextview"
android:text="#string/text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="20sp" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<View
android:id="#+id/view2"
android:layout_width="fill_parent"
android:layout_height="100dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" >
<ImageButton
android:id="#+id/back_arrow"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:layout_marginRight="45dp"
android:layout_weight=".5"
android:background="#drawable/backbut"
android:contentDescription="#string/Description"
android:onClick="onClickBtn"
android:src="#drawable/backarrowpress" />
<ImageButton
android:id="#+id/copyButton"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_weight=".5"
android:background="#drawable/copy"
android:contentDescription="#string/Description"
android:onClick="onClickBtn" />
</LinearLayout>
</RelativeLayout>
But I am in same situation. No text is vertically centered
Your TextView Attributes need to be something like,
<TextView ...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|right" ../>
Now, Description why these need to be done,
android:layout_width="match_parent"
android:layout_height="match_parent"
Makes your TextView to match_parent or fill_parent if You don't want to be it like, match_parent you have to give some specified values to layout_height so it get space for vertical center gravity. android:layout_width="match_parent" necessary because it align your TextView in Right side so you can recognize respect to Parent Layout of TextView.
Now, its about android:gravity which makes the content of Your TextView alignment. android:layout_gravity makes alignment of TextView respected to its Parent Layout.
Update:
As below comment says use fill_parent instead of match_parent. (Problem in some device.)
The problem is the padding of the font on the textview. Just add to your textview:
android:includeFontPadding="false"
just use like this to make anything to center
android:layout_gravity="center"
android:gravity="center"
updated :
android:layout_gravity="center|right"
android:gravity="center|right"
Updated : Just remove MarginBottom from your textview.. Do like this.. for your textView
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center|right"
android:text="hello"
android:textSize="20dp" />
</LinearLayout>
Try to put android:gravity="center_vertical|right" inside parent LinearLayout else as you are inside RelativeLayout you can put android:layout_centerInParent="true" inside your scrollView.
In relative layout you need specify textview height:
android:layout_height="100dp"
Or specify lines attribute:
android:lines="3"
i'm working on a LinearLayout but unfortunately it's not working as it should.
The goal is to have a LinearLayout with two TextViews (one placed below the other) on the left side, and an ImageView on the right side.
The ImageView should be as big as possible, the TextViews should take the remaining space.
At the moment my layout XML is like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="1dp"
android:background="#drawable/background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="1234"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/layout2label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234_label2"
android:textSize="14dp" />
</LinearLayout>
<ImageView
android:id="#+id/layout_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
The part that isn't working: If the text in the TextViews is "too long", the ImageView gets shrinked. I want it exactly the other way round.
Any solutions?
It would be more efficient to use RelativeLayout instead of LinearLayout. Then you can place your views without having to nest layouts:
<?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" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/image"
android:layout_below="#+id/title"
/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
By arranging the TextViews to be relative to the ImageView instead of the other way around, the ImageView takes priority for the space, and the text works with the remainder.
this might be help to you
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="1dp"
android:background="#drawable/background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="1234"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/layout2label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234_labj hairu iue rel2"
android:textSize="14dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/layout_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
A little modification to Kirans Code..worked for me
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="Name: BalaVishnu"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/layout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:src="#drawable/edit_icon" />
</LinearLayout>
This is the part of the Code of a very long Layout.So posting of whole code was of no use.
I want to align the RED circle.Both the positions are shown in the RED colored circles.
The ParentLayout of whole activity is a RelativeLayout but has nothing to do with this.
Please help me.I have tried all the things that I knew.
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/Layoutborder"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:background="#drawable/image_bg"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"/>
</LinearLayout>
</LinearLayout>
Change the 3rd LinearLayout to :
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:padding="5dp" >
Not sure if you are satisfied with that kind of layout.
If this whole thing is inside a RelativeLayout, remove the outer LinearLayout (moving margins and such to the first child LinearLayout as required), and change the second child LinearLayout - the one with 5dp padding - to have
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
If you don't want to do this and have to keep the outer LinearLayout for some reason, move
android:layout_marginTop="20dp"
from the parent LinearLayout to the first child, and set layout_width of the second child to fill_parent, and add android:gravity="right" to it.
The code you provided does not show where you have specified the properties of RED text "here". You could probably just add it as another element in your relative layout where you specify the availability and stock which would align it with the preceding text.
Edit: (after understanding your actual problem)
I would suggest wrapping in another linear layout which will enable you to position the text above the picture as shown in the code below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Availability "
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp" />
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="3dp"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="3dip" >
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/texttitle"
android:src="#drawable/button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
This was the Another way achieve the above Output.Hope it may help SomeOne.
<RelativeLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#color/white"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:background="#drawable/image_bg"
android:layout_alignParentLeft="true"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"
/>
</LinearLayout>
</RelativeLayout>
I need to make a layout which is specific to webpage and it needs to look like a web article with an image and a text left to and under it. Look at the image.
As this is an easy thing to do in a web world, I am not sure how to do it in XML layout.
Obviously, the TextView must be on the left while the image is present, and after it reaches the bottom of the image, it has to stretch to the screen width. I tried this with two TextViews (one for left and another for bottom), but it just does not look right due to the text font size.
EDIT
I also tried to dinamically catch the height of image and then assign it to my TextView, and then make another TextView with the size of the screen under these two elements. This does not work as well as I cannot control the text that is not visible due to limited height of the first TextView.
If you haven't found the answer yet. Here is the same kind of question that is being answered.
How to align TextView around an ImageView?
The only thing what you might have to change in your case is to, make the alignment to be opposite way.
<?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"
android:padding="5dp">
<TextView
android:textSize="18.0sp"
android:id="#+id/message_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/text" />
<ImageView
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/message_view"
android:id="#+id/icon" />
Taken from here,
http://dev.androidteam.ru/snippets/textview/leadingmarginspan2
check out this. it does same as you want
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView4"
android:layout_width="fill_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_marginTop="5dp"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFFFF" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
<TextView
android:id="#+id/textView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#FFFFFF"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
use this way layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="21dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/imageView1"
android:layout_marginLeft="30dp"
android:textColor="#fff"
android:text="TextView" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="30dp"
android:text="TextViewaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
android:layout_alignBottom="#+id/textView1"></TextView>
</RelativeLayout>
And add in code
TextView tv1=(TextView)findViewById(R.id.textView1);
tv1.setMaxHeight(maxHeight);
where maxHeight is dynamically get height of imageview
and than put condition to by getting height of textview1 to assign text to second textview
may it helps u
like this am I right?