How to mirror text position? - android

I'm trying to lay some text out on left and right that have a mirroring position as below.
What's happening here is that the last row in the right column ("Some more text") is the widest so it pushes the two rows above further to the right. For the sake of symmetry, the left column is pushed further to the left. The text values are supposed to be dynamic. Does anyone know how the layouts should be designed?
Here's my code (sadly, it doesn't even align to the right!):
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
<RelativeLayout android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1">
<RelativeLayout android:id="#+id/description_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
<TextView android:id="#+id/title_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="30 DAYS"/>
<TextView android:id="#+id/num_ds_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title_30"/>
<TextView android:id="#+id/num_bs_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/num_ds_30"/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout android:id="#+id/description_today"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toRightOf="#id/description_30">
<TextView android:id="#+id/title_today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="TODAY"/>
<TextView android:id="#+id/num_ds_today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_below="#id/title_today"/>
<TextView android:id="#+id/num_bs_today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_below="#id/num_ds_today"/>
</RelativeLayout>
</LinearLayout>

You can achieve something like that by nesting LinearLayouts. The outer LinearLayout would have an orientation=horizontal, and the two inner LinearLayout an orientation of vertical with each having a layout_weight=1 and the second (right) LinearLayout would also have gravity="right".
The code would be something like this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
... />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="right">
<TextView
... />
</LinearLayout>
</LinearLayout>
</LinearLayout>

I think using a RelativeLayout and aligning the TextViews to the left/right is a good approach. Like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/Text1_Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/Text2_Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/Text1_Left" />
<TextView
android:id="#+id/Text3_Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/Text2_Left" />
<TextView
android:id="#+id/Text1_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/Text1_Left"
android:gravity="right" />
<TextView
android:id="#+id/Text2_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Text1_Right"
android:layout_toRightOf="#id/Text2_Left"
android:gravity="right" />
<TextView
android:id="#+id/Text3_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Text2_Right"
android:layout_toRightOf="#id/Text1_Left"
android:gravity="right" />
</RelativeLayout>

Related

Android RecyclerView : Setting a view at the bottom of each row of recyclerView.

I have a view that works as a footer of each row of recyclerView. What I am trying to achieve is something like this.
The image represents a row of my recyclerView.and each box a different view.
For most of the part it is obvious but I am having issues placing the the view that is represented by the yellow box at the bottom of the row.
I have tried a few different ways for example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="#+id/colored_penal"
android:layout_width="4dp"
android:layout_height="fill_parent"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="128"
android:textSize="24sp"/>
<TextView
android:id="#+id/unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mtr" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/hospital_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey, this is a dummy hospital"
android:textSize="18sp" />
<TextView
android:id="#+id/hospital_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/hospital_name"
android:text="At the end of the road" />
<!--This is the yellow box view that I want at the bottom-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="8dp"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/waiting_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Waiting time: 40 mins"
android:textSize="8sp"
android:layout_weight="1"/>
<TextView
android:id="#+id/travel_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Travel time: 20 mins"
android:textSize="8sp"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I have used alignParentBottom as true yet the view is not getting placed at the bottom of the row. It makes sense that Android squeezes each row to make sure it looks like a recyclerView but than how to put something at the bottom?
I also tried setting up layout_height="fill_parent" and gravity="bottom" for the LinearLayout (yellow view) despite knowing fill_parent is deprecated but it didn't work anyways.
Would appreciate any input helping me achieve this.
I just optimized layout. You need to specify your own View Components and attributes like maxLines or textSizes and etc. Its layout-ready.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<View
android:layout_width="10dp"
android:layout_height="match_parent"/>
<View
android:layout_width="100dp"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="12dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Title"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Content"/>
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Footer"/>
</LinearLayout>
Good luck there
Emre
This might do what you are looking for
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="128"
android:textSize="24sp" />
<TextView
android:id="#+id/unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mtr" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TextView
android:id="#+id/hospital_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey, this is a dummy hospital"
android:textSize="18sp" />
<TextView
android:id="#+id/hospital_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/hospital_name"
android:text="At the end of the road" />
<!--This is the yellow box view that I want at the bottom-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:layout_below="#+id/hospital_address">
<TextView
android:id="#+id/waiting_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Waiting time: 40 mins"
android:textSize="8sp" />
<TextView
android:id="#+id/travel_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Travel time: 20 mins"
android:textSize="8sp" />
</LinearLayout>
<View
android:id="#+id/colored_penal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_below="#+id/hospital_address"
android:layout_marginTop="10dp" />
</RelativeLayout>
</LinearLayout>

buttons disappearing from a linear layout

I have a complicated linear layout, with some buttons and edittext:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|center_horizontal"
android:orientation="vertical"
android:weightSum="1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="400dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="0dp"
android:text="#string/stop"
android:textSize="18dp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/text"
android:hint="#string/hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/choose"
android:layout_alignParentLeft="true"
android:minWidth="150dp"
android:textSize="10sp"/>
<Button
android:id="#+id/text2"
android:hint="#string/favourites"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/choose"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/text"
android:textSize="10sp"
/>
<Button
android:id="#+id/text3"
android:hint="#string/clean"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/choose"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/text"
android:textSize="10sp"
/>
</LinearLayout>
<Button
android:id="#+id/button"
android:text="#string/request"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text2"
android:onClick="lookUp"
android:textSize="12sp"
/>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#3d455b"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button">
<HorizontalScrollView
android:id="#+id/hscrll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_gravity="left"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:id="#+id/table_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="false"
android:stretchColumns="2">
</TableLayout>
</RelativeLayout>
</HorizontalScrollView>
</ScrollView>
</LinearLayout>
Everything looks at it should on a large screen (tablet): I have the first line with the edittext and two buttons, on the line below I have the other button, and below it I have the scrollview (with the table).
When I switch to normal screen (smartphone), only the first line is appearing, the rest not being visible.
What could the solution be?
In Small Screen device there are problem with margin you set, try to
remove android:layout_marginBottom="400dp" from your ParentLayout and manage your Layout according them
At the second linear_layout (that have horizontal orientation) all of your views, have match parent width that cause non of them are visible. I think it's what you want:
`
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/text"
android:hint="#string/hint"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:minWidth="150dp"
android:textSize="10sp"/>
<Button
android:id="#+id/text2"
android:hint="#string/favourites"
android:layout_width="0dp"
androidlayout_weight = "1"
android:layout_height="wrap_content"
android:textSize="10sp"
/>
<Button
android:id="#+id/text3"
android:hint="#string/clean"
android:layout_width="0dp"
android:layout_weight = "1"
android:layout_height="wrap_content"
android:textSize="10sp"
/>
</LinearLayout>
`

Can't align view to the right

I am trying to display one view in the left side and one to the right side of the parent layout as following:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left"
android:layout_gravity="left" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right"
android:layout_gravity="right" />
</LinearLayout>
But as a result I see both textViews aligned to the left only. I don't understand why. I manage to set the verticaly layout_gravity but not the horizontal one. In addition, I could add:
android:gravity="right"
to the parent layout and than see both views on the right side but couldnt find a way to display one in the left side and one in the right side.
Please help.
Another trick here;
Place an invisible View between the TextViews. And it will occupy the whole remaining area with android:layout_weight="1", so TextViews will remain on both ends. No gravity needed. Try the code below :)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />
</LinearLayout>
You can try this as well
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="left" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="right" />
</LinearLayout>
Try this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="left" />
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="right" />
</LinearLayout>
Or Try the following
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="left" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="right" />
</RelativeLayout>
Edit:
In method 1 using weight for splitting the total screen as two parts and set the gravity for first item is left and gravity for second item is right.
I am not using android:layout_gravity for TextView . Using android:gravity. Better practise you can use relativeLayout. Check the second option
Set android:layout_weight="1" to both your TextViews
Use Relativelayout instead
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="left" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="right" />
</RelativeLayout>
<?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:weightSum="100"
android:orientation="horizontal">
<TextView
android:layout_weight="50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="left"
android:gravity="left" />
<TextView
android:layout_weight="50"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="right"
android:gravity="right" />
</LinearLayout>
try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="left" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="left" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="right" />
</LinearLayout>
</LinearLayout>
The easiest solution with LinearLayout is modifying your right textview with gravity="right"
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="right"
android:gravity="right" />
But I would strongly reccomend using a RelativeLayout as #Sjd suggested.

Alignment of two Relative layout within a main relative layout

<RelativeLayout
android:id="#+id/OtherWeatherInfo_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_space"
android:layout_marginLeft="#dimen/margin_space"
android:layout_marginRight="#dimen/margin_space" >
<RelativeLayout
android:id="#+id/OtherWeatherInfo"
android:layout_width="#dimen/weather_space"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_alignParentLeft="true"
android:background="#drawable/rect_block" >
<LinearLayout
android:id="#+id/humidityLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/humidityTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/str_humidity"
android:textSize="#dimen/weather_size"
android:textStyle="bold" >
</TextView>
<TextView
android:id="#+id/humidityValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/str_no_data"
android:textColor="#color/color_white"
android:textStyle="bold" >
</TextView>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/OtherWeatherInfo2"
android:layout_width="#dimen/weather_space"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:layout_toRightOf="#+id/OtherWeatherInfo"
android:background="#drawable/rect_block" >
<LinearLayout
android:id="#+id/visiLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/visiTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/str_visi"
android:textSize="#dimen/weather_size"
android:textStyle="bold" />
<TextView
android:id="#+id/visiValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/str_no_data"
android:textColor="#color/color_white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
The above code is written by me to achieve the following figure:.But what I am achieving is this: or this:.
I have absolutely no clue about what is the mistake I am doing here??I am just using a main relative layout
OtherWeatherInfo_main and within that I am embedding two relative layouts to represent the two weather attributes. #dimen/weather_space is 145 dp.I am unable to align the two relative layout within the main layout equally.Any help will be appreciated.
Wrap the two RelativeLayouts inside a LinearLayout with horizontal orientation and then assign both the RelativeLayouts equal weight.
In general, something like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weight="0.5" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weight="0.5" />
</LinearLayout>
Remove either this
android:layout_alignParentRight="true"
or this
android:layout_toRightOf="#+id/OtherWeatherInfo"
from your second layout.
Also you can wrap both your RelativeLayouts to the horizontal LinearLayout and use android:layout_weight attribute
Try this way,if you wan achieved your design using LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="#+id/txtCityName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kolkata"/>
<ImageView
android:id="#+id/imgWeather"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_marginTop="20dp"/>
<TextView
android:id="#+id/txtTemprature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="28 C"
android:layout_margin="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Humidity"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="29"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Humidity"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="29"/>
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/txtDateTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fri 28"
android:layout_margin="10dp"/>
</LinearLayout>

Textview center-aligned based on percentage of screenwidth

I thought this will be a common question, but I couldn't find any answers......
Is it possible to center-aligned a (variable length) textview based on a percentage of the screen width?
In my case, I have 2 textview and I want to achieve something like this:
Another example:
The first textview is center-aligend 30% of the screenwidth, width=wrap_content, while the second textview takes up the rest of the space. The first textview's size should NOT be fixed (see picture above)
I do not want to do that programatically, as it will be expensive on my program. If possible it's better be in an xml layout file :)
Right now I can only achieve a "left-aligned" textview using layout_weight of LinearLayout (by putting a 30% dummy on the left), but I want center-alignment.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="another textview"
android:textColor="#FFFF0000"/>
</LinearLayout>
</LinearLayout>
With almost an hour testing this "..." layout, I succeeded with this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100" >
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="40"
android:background="#android:color/transparent">
<RelativeLayout
android:id="#+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="0dp"
android:gravity="center"
android:padding="0dp"
android:singleLine="true"
android:text="first textview"
android:textColor="#FFFF0000" >
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#0000FF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#00FF00"
android:gravity="center"
android:text="textview"
android:textColor="#FFF" />
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/left_layout"
android:background="#0000FF"
android:gravity="center"
android:text="textview"
android:textColor="#FFF" />
</RelativeLayout>
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="60"
android:background="#FFFF0000"
android:gravity="right"
android:singleLine="true"
android:text="another textview"
android:textColor="#FFF" />
</LinearLayout>
Outputs
Finally in your Java, according to the green textview width or content length, you can change the layout_weight for other textviews programmatically.
This should help you
Have a nice day.
// try this way hope this will help you...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="0.15"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.85">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="first Textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second textview demo text "/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
try this one
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Work perfect checked by me.

Categories

Resources