I have comman header with two button and single textview.
textview is in center of the screen. button 1 is at the right side of the parent and button2 is at the left side of the parent.
now, I want to show text view in the center of the parent not in the center of the space between two buttons.
Text length in the textview can be any thing either it could be 3 words or it could be more than 10 word.
I dont want to overlap textview above the two buttons while length is more than 10 words.
and also I want textview in the center of the screen while there is only 3 words.
When I am using below code it is not showing textview in the center of the screen horizontally when there is only 3 to 4 words but below code also dont overlap while there is more than 10 words.
<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"
tools:context=".Webviewdemo" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/backbtn" />
<ImageView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#drawable/infobtn" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="#+id/button2"
android:layout_toRightOf="#+id/button1"
android:gravity="center"
android:singleLine="true"
android:text="123"
android:textSize="22sp"/>
</RelativeLayout>
In same way When I am using below code it is showing textview in the center of the screen horizontally when there is only 3 to 4 words but below code overlap while there is more than 10 words.
<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"
tools:context=".Webviewdemo" >
<ImageView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/backbtn" />
<ImageView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#drawable/infobtn" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:singleLine="true"
android:text="123"
android:textSize="22sp" />
</RelativeLayout>
So, My question is how can I achive above both thing with single code.
Textview should not overlap while there is more words.
Textview should be in center while there is less no of words.
I hope you all get my problem. if any query plz ask.
<LinearLayout
android:id="#+id/panelIconLeft1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="5dp" >
<Button
android:id="#+id/btnHome1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LOCATION"
android:onClick="btnHomeClick" />
</LinearLayout>
<TextView
android:id="#+id/txtHeading1"
style="#style/heading_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#+id/panelIconRight1"
android:layout_toRightOf="#id/panelIconLeft1"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center"
android:singleLine="true"
android:text=""
android:textColor="#android:color/white" />
<LinearLayout
android:id="#+id/panelIconRight1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="5dp" >
<Button
android:id="#+id/btnFeedback1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Post Ad"
android:onClick="btnFeedbackClick" />
</LinearLayout
The above code will help you
Use This Code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="left">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="right" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
try this code
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_toRightOf="#+id/button1"
android:gravity="center"
android:singleLine="true"
android:text="123"
android:textSize="22sp"/>
EDIT
remove this line
android:layout_centerInParent="true"
try this (without centerInParent)
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_toRightOf="#+id/button1"
android:gravity="center"
android:singleLine="true"
android:text="123"
android:textSize="22sp"/>
Related
Want to show the TextView and Button on the ImageView I try but ImageView hides the Button and TextView Help me what I can do I try it in different Layouts I update the new code but same issue face
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" >
</ImageView>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/imageview"
>
</RelativeLayout>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/btn_booking"
android:layout_gravity="right"
android:gravity="bottom"
android:layout_alignBottom="#+id/text_booking"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/text_booking"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
Use a RelativeLayout as your root layout:
<?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">
<ImageView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" >
</ImageView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/text_booking"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/btn_booking"
android:layout_gravity="right"
android:gravity="bottom"
android:layout_marginLeft="180dp"/>
</LinearLayout>
</RelativeLayout>
look at my code i recently use it i use the parent layout(RelativeLayout) and set the bacground image for parent layout also i change background in java and inside parent layout add images and text what you want.......!
hope it will help you.
<RelativeLayout
android:id="#+id/frontLay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/note0">
<TextView
android:id="#+id/imageOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="50dp"
android:background="#drawable/onecircle"
android:tag="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:id="#+id/imageTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/imageOne"
android:layout_alignRight="#+id/imageOne"
android:layout_below="#+id/imageOne"
android:layout_marginEnd="17dp"
android:layout_marginRight="17dp"
android:layout_marginTop="15dp"
android:background="#drawable/twocircle"
android:tag="2"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:id="#+id/imageThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageTwo"
android:layout_marginLeft="35dp"
android:layout_marginStart="35dp"
android:layout_toEndOf="#+id/imageSix"
android:layout_toRightOf="#+id/imageSix"
android:background="#drawable/threecircle"
android:tag="3"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:id="#+id/imageFour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageTwo"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/imageTwo"
android:layout_marginTop="29dp"
android:background="#drawable/fourcircle"
android:tag="4"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="25dp"
android:textStyle="bold" />
<TextView
android:id="#+id/imageFive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageTwo"
android:layout_toLeftOf="#+id/imageEight"
android:layout_toStartOf="#+id/imageEight"
android:background="#drawable/fivecircle"
android:tag="5"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="25dp"
android:textStyle="bold"
android:visibility="invisible" />
</RelativeLayout>
1) Change your Main LinearLayout (First one) to RelativeLayout
2) In your Sub LinearLayout (Second one) use -
android:layout_above="#+id/imageview"
android:alignParentBottom="true"
UPDATE
Please Check it -
<?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">
<ImageView
android:id="#+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#mipmap/ic_launcher"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageview"
android:alignParentBottom="true"
android:weightSum="2"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weight="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/text_booking"/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/btn_booking"
android:weight="1"/>
</RelativeLayout>
Hope it will help :)
Just add these two lines and my issue is resolved.
android:layout_toLeftOf="#+id/btn_booking"
android:layout_toStartOf="#+id/btn_booking"
strange everyone suggested to you to use RelativeLayout while you should use FrameLayout for this kind of stuff. its pretty easy to achieve that with FrameLayout rather than RelativeLayout as the RelativeLayout is pretty expensive when it comes to drawing. to achieve what you asking for you should use this simple combination:
FrameLayout>ImageView>LinearLayout(with layout_gravity){Button,TextView}/>
I have defined 3 controls on my screen, placed in the following order:
button
- textView
- button
I want to place the first button on the left side and place the textView in the middle. The second button should be on the right side.
However, I cannot find a way to force the buttons to stick to the left/right side and for the textView too stick to the middle.
This is the code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:id="#+id/button" />
</LinearLayout>
And this is the screenshot:
And this is what I want to have (without the padding):
Try this code :
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:gravity="center_vertical"
android:text="Today Data"
android:textAlignment="center"
android:textColor="#0000ff"
android:background="#00000000"
android:textSize="20dp"
android:textStyle="bold|italic"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
Output :
set layoutgravity and gravity as left, center and right respectively for all the three widgets
You can try a RelativeLayout. Like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:layout_alignParentLeft="true"
android:id="#+id/button2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:layout_centerHorizontal="true"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>"
android:layout_alignParentRight="true"
android:id="#+id/button" />
</RelativeLayout>
Please use a Relative Layout instead of a LinearLayout.
Add to Button
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
Add to TextView
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
Add to the Right Button
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
You could use layout weights to get exactly what you are looking for:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Today Data"
android:textAlignment="center"
android:textStyle="bold|italic"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<"
android:id="#+id/button"
/>
Remember that Android makes two passes when determining the size and position of the components in a layout. The first pass uses the layout_width and layout_height settings. In this case it is wrap_content for most of the widgets which will make them their "natural" size to fit their content. The second pass uses the layout_weight attribute to allocate any remaining pixels. Given that this is a horizontal linear layout, those pixels will be allocate to the horizontal size of the widgets. Only the TextView specifies a weight attribute, so it will get 100% of the remaining pixels.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.20"
android:gravity="left">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.60"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="data"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.20"
android:gravity="right">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
</LinearLayout>
</LinearLayout>
This is also working
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:text="<<"
android:id="#+id/button2" />
<TextView
android:layout_width="0sp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:id="#+id/TodayDataTextView"
android:text="Today Data"
android:textAlignment="center"
android:layout_gravity="center"
android:gravity="center"
android:textColor="#0000ff"
android:background="#00000000"
android:layout_margin="5dp"
android:textSize="20dp"
android:textStyle="bold|italic" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:text=">>"
android:id="#+id/button" />
</LinearLayout>
I've a shop layout in which are three different sized images. To the right of them, there is text representing price. How can I align images and text under each other ? And put the middle of the screen between Image and text. Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" android:background="#drawable/podklad">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lives"
android:focusable="false" android:background="#drawable/heart_image"
android:layout_below="#+id/money" android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price1"
android:textSize="30sp" android:textColor="#ff000000"
android:layout_alignTop="#+id/lives" android:layout_toRightOf="#+id/lives"
android:layout_toEndOf="#+id/lives"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/money" android:layout_alignParentTop="true" android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" android:textSize="40dp" android:textColor="#ff000000"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/monstertoprightcolored"
android:id="#+id/hardmode"
android:layout_centerVertical="true" android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price2"
android:textSize="30dp"
android:textColor="#ff000000"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/hardmode"
android:layout_toEndOf="#+id/hardmode"
android:layout_above="#+id/price3"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/monsterbottomleftcolored"
android:id="#+id/reversedmode"
android:layout_alignParentBottom="true" android:layout_alignLeft="#+id/hardmode"
android:layout_alignStart="#+id/hardmode"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price3"
android:textSize="30dp"
android:textColor="#ff000000"
android:layout_marginTop="26dp"
android:layout_below="#+id/hardmode"
android:layout_toRightOf="#+id/price2"
android:layout_toEndOf="#+id/price2"/>
A TableLayout might work better in this case. Here's a start to what your layout would look like:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:stretchColumns="*">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="2"
android:layout_gravity="right"
android:id="#+id/money"
android:textSize="40dp"
android:textColor="#ff000000"
tools:text="money" />
</TableRow>
<TableRow>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/lives"
android:focusable="false"
android:background="#drawable/heart_image"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price1"
android:textSize="30sp"
android:textColor="#ff000000"
tools:text="price1" />
</TableRow>
<TableRow>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/monstertoprightcolored"
android:id="#+id/hardmode" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price2"
android:textSize="30dp"
android:textColor="#ff000000"
tools:text="price2" />
</TableRow>
<TableRow>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/monsterbottomleftcolored"
android:id="#+id/reversedmode" />
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price3"
android:textSize="30dp"
android:textColor="#ff000000"
android:layout_marginTop="26dp"
tools:text="price3" />
</TableRow>
</TableLayout>
Note that in order to "put the middle of the screen between Image and text", the two columns have to be equal in width. This is done by setting android:stretchColumns="*" in the TableLayout, and setting android:layout_width="0dp" and android:layout_weight="1" in the children of the TableRows.
See tablelayout - Set equal width of columns in table layout in Android for more info.
You can use linear layouts for this. Image and text can be split vertically in a linear layout. Each of this linear layout can be placed horizontally. Can you add a screenshot of how your layout should look for better understanding.
Here try this ,hope to help you, and i hope that i understand your problem correctly.
<?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:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:background="#drawable/ic_launcher">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lives"
android:focusable="false"
android:background="#drawable/ic_launcher"
android:layout_below="#+id/money"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price1"
android:textSize="30sp"
android:text="Text"
android:textColor="#ff000000"
android:layout_alignTop="#+id/lives"
android:layout_toRightOf="#+id/lives"
android:layout_toEndOf="#+id/lives" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/money"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textSize="40dp"
android:text="Text"
android:textColor="#ff000000" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:id="#+id/hardmode"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price2"
android:textSize="30dp"
android:textColor="#ff000000"
android:text="Text"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/hardmode"
android:layout_toEndOf="#+id/hardmode"
android:layout_above="#+id/price3" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:id="#+id/reversedmode"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#+id/hardmode"
android:layout_alignStart="#+id/hardmode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/price3"
android:textSize="30dp"
android:textColor="#ff000000"
android:layout_marginTop="26dp"
android:layout_below="#+id/hardmode"
android:text="Text"
android:layout_toRightOf="#+id/price2"
android:layout_toEndOf="#+id/price2" />
</LinearLayout>
Iam having a custom list view where in a row i have 3 text views and 3 images each below each textview
(Relative Layout)
TextView1 Textiew2 TextView3
opening---->(LinearLayout1) (LinearLayout2) (LinearLayout3)
ImageView1 ImageView2 ImageView3
closing---->(/LinearLayout1) (/LinearLayout2) (/LinearLayout3)
closing-->(/RelativeLayout)
Now the output comes like the imageview is not center totextview, i mean if you have your text and image in center and its centerhorizontal then how it looks like, i need same on right and left end too, text and image in right end should be centered in right side , and same for left also. Please suggest me what to do.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="49dp"
android:layout_marginTop="43dp"
android:gravity="center"
android:text="TextView" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_below="#+id/textView1"
android:layout_marginRight="47dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book1" />
</LinearLayout>
</RelativeLayout>
In this above xml my textview is leftaligned and its text inside is centered, Now iam having one image below it which i want to align center of the above textview not parents center
Try this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.33">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your title"
android:textStyle="bold" />
<ImageView
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.33">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your title"
android:textStyle="bold" />
<ImageView
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.34">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your title"
android:textStyle="bold" />
<ImageView
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Try That:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="49dp"
android:layout_marginTop="43dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/book1" />
</LinearLayout>
I'm trying to get the button to the bottom the layout, and it just won't work...
The button is displaying it self on the image that should be above it.
Here is the xml code:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars = "vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible" />
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageview4"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
And the result is:
Thanx upfront.
You used android:layout_alignBottom="#+id/imageview4"
This means you align the bottom of your button with the bottom of your image.
You have to use android:layout_below="#+id/imageview4"
EDIT: I don't say this is the best solution, because of multiple layouts (for optimisation...) but this should work:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp"/>
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal"/>
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars="vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible"/>
</RelativeLayout>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Download & Install"/>
</LinearLayout>
</ScrollView>
I added a linear layout in which I put the content, and the button.
Hope this will work.
Do you just want the image that the button is over to shrink in order to make room for it? If so, you need to put the Imageview that contains that image as the very last item in your relative layout. It's going to allocate space for everything but the image, and then give the remaining space to the image, which is why it needs to be last.
Also, I suggest giving your imageViews more informative names than "imageView#", since it's kind of difficult to tell which is which.
You might want to wrap you images in a HorizontalScrollView to maintain full height and width of all your images. I changed a lot of the ViewGroups' widths and heights to accommodate the HorizontalScrollView, finally I set the Button below the images:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:maxLines="10"
android:scrollbars="vertical"
android:text=""
android:width="600px" />
<HorizontalScrollView
android:id="#+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/images"
android:layout_centerHorizontal="true"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
Understand that nesting a HorizontalScrollView inside a ScrollView (or vica versa) does not create a smooth scrolling effect in the x & y directions simultaneously. But you can create this effect as discussed here: Scrollview vertical and horizontal in android.