This is link of my UI:
when text is normal.
When i give more text, UI changes like this:
Below is my xml file code, which change in Ui helps me when enters much text:
Please tell me how can i fix this??
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:layout_margin="5dp">
<TableRow>
<TextView
style="#style/StyleLabel"
android:text="#string/name_lbl"/>
<TextView
android:id="#+id/nameText"
style="#style/StyleText"/>
</TableRow>
<TableRow>
<TextView
style="#style/StyleLabel"
android:text="#string/cap_lbl"/>
<TextView
android:id="#+id/capText"
style="#style/StyleText"/>
</TableRow>
<TableRow>
<TextView
style="#style/StyleLabel"
android:text="#string/code_lbl"/>
<TextView
android:id="#+id/codeText"
style="#style/StyleText"/>
</TableRow>
<TableRow>
<TextView
style="#style/StyleLabel"
android:text="#string/DoneDate_lbl"/>
<TextView
android:id="#+id/Location_lbl"
style="#style/StyleText"/>
</TableRow>
<TableRow>
<TextView
style="#style/StyleLabel"
android:text="#string/Notes_lbl"/>
<TextView
android:id="#+id/Notes_lbl"
style="#style/StyleText"/>
</TableRow>
<TableRow>
<TextView
style="#style/StyleLabel"
android:text="#string/person_lbl"/>
<TextView
android:id="#+id/Person_lbl"
style="#style/StyleText"/>
</TableRow>
</TableLayout>
Below is styles.xml :
<resources>
<style name="StyleLabel">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">right</item>
<item name="android:textSize">14sp</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:layout_marginLeft">5dp</item>
<item name="android:layout_marginRight">5dp</item>
<item name="android:layout_marginTop">5dp</item>
</style>
<style name="StyleText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:layout_margin">5dp</item>
<item name="android:background">#drawable/textview_border</item>
</style>
</resources>
Add below property to your textview.
singleLine="false"
android:ellipsize="end"
android:lines="1"
Use this in your styletext
android:singleLine="true"
Place this line in your TextView tag of xml file:
android:singleLine="true"
then the data entered in TextView will be in single line.
UPDATE:
Add the below line in all your TextViews:
android:ellipsize="end"
android:maxLines="10" //Restrict to some number of lines
Related
I want to put the atendenteBalaoProdutoValor element beside the atendenteBalaoProdutoNome, for this. I tried this:
<?xml version="1.0" encoding="utf-8"?>
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
style="#style/layoutAtendenteBalao"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+atendente/rltAtendenteBalao">
<TextView
style="#style/campoAtendenteBalaoTexto"
android:id="#+atendente/txtTexto"/>
<RelativeLayout
style="#style/atendenteBalaoVO"
android:layout_width="match_parent"
android:id="#+atendente/rltAtendenteBalaoVO">"
<TextView
style="#style/atendenteBalaoVOTexto1"
android:id="#+atendente/txtAtendenteBalaoVOTexto1"/>
<LinearLayout
style="#style/atendenteBalaoVOTextoQuantidadeTexto2">"
<EditText
style="#style/atendenteBalaoVOQuantidade"
android:id="#+atendente/txtAtendenteBalaoVOQuantidade"/>
<TextView
style="#style/atendenteBalaoVOTexto2"
android:id="#+atendente/txtAtendenteBalaoVOTexto2"/>
</LinearLayout>
<Button
style="#style/atendenteBalaoVOMais"
android:id="#+atendente/btnAtendenteBalaoVOMais"/>
<Button
style="#style/atendenteBalaoVOMenos"
android:id="#+atendente/btnAtendenteBalaoVOMenos"/>
</RelativeLayout>
<LinearLayout
style="#style/atendenteBalaoProduto"
android:id="#+atendente/lnrProduto">
<TextView
style="#style/atendenteBalaoProdutoNome"
android:id="#+atendente/txtProdutoNome"/>
<LinearLayout
style="#style/atendenteBalaoProduto1"
android:id="#+atendente/lnrAtendenteBalaoProduto1">
<ImageView
style="#style/atendenteBalaoProdutoImagem"
android:id="#+atendente/imgProduto"/>
<TextView
style="#style/atendenteBalaoProdutoDescricao"
android:id="#+atendente/txtProdutoDescricao"/>
</LinearLayout>
<TextView
style="#style/atendenteBalaoProdutoValor"
android:id="#+atendente/txtProdutoValor"/>
<LinearLayout
style="#style/atendenteBalaoProduto2"
android:id="#+atendente/lnrProdutoQuantidade"
android:focusableInTouchMode="true">
<TextView
style="#style/atendenteBalaoProdutoRotuloQuantidade"
android:id="#+atendente/txtProdutoQuantidadeRotulo" />
<EditText
style="#style/atendenteBalaoProdutoQuantidade"
android:id="#+atendente/txtProdutoQuantidade"
android:inputType="numberDecimal"
android:digits="0123456789,."
android:imeOptions="actionDone"/>
<TextView
style="#style/atendenteBalaoProdutoUnidade"
android:id="#+atendente/txtProdutoUnidade"/>
<Button
style="#style/atendenteBalaoProdutoMenosMais"
android:id="#+atendente/btnQtdeMenos"
android:text="-" />
<Button
style="#style/atendenteBalaoProdutoMenosMais"
android:id="#+atendente/btnQtdeMais"
android:text="+" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
and the styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="atendenteBalaoProdutoNome">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">14dp</item>
<item name="android:textColor">#color/black</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_marginTop">13dp</item>
<item name="android:layout_marginLeft">5dp</item>
</style>
<style name="atendenteBalaoProdutoValor">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">14dp</item>
<item name="android:textColor">#color/black</item>
<item name="android:textStyle">bold</item>
</style>
</resources>
But it is like this:
Instead of:
I tried to put RelativeLayout on atendenteBalaoProduto and set the values android:layout_alignParentLeft,android:layout_toLeftOf,android:layout_alignParentRight on atendenteBalaoProdutoNome and atendenteBalaoProdutoValor elements, but it also haven't worked.
I am trying to create a layout like this (the blue bubble):
However, in my XML below, the blue bubble extends to the whole width of the fragment though I have specified the width as wrap_content everywhere. Any ideas ?
<?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:paddingBottom="5dp"
android:paddingRight="17dp"
android:paddingLeft="17dp"
android:layout_alignParentRight="true"
android:gravity="right"
android:layout_gravity="right"
android:paddingTop="5dp">
<RelativeLayout
android:layout_width="wrap_content" android:id="#+id/bubble_user" android:gravity="end" android:background="#drawable/chat_user_reply_background" android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/user_reply_status"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignBottom="#+id/chat_user_reply"
android:layout_marginBottom="5dp"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_single_tick"
android:visibility="visible" />
<TextView
android:id="#+id/user_reply_timing"
style="#style/chat_timings"
android:layout_alignBottom="#id/chat_user_reply"
android:textColor="#color/gray"
android:paddingBottom="5dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/user_reply_status"
android:text="17:10" />
<TextView
android:id="#+id/chat_user_reply"
style="#style/chat_text_message_style"
android:layout_toLeftOf="#id/user_reply_timing"
android:maxWidth="280dp"
android:autoLink="web"
android:text="Rahul Agrawal is a good boy but he does not know what he wants." />
</RelativeLayout>
</RelativeLayout>
<style name="chat_text_message_style">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/chat_message_text_color</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:textSize">18sp</item>
</style>
<style name="chat_timings">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">12sp</item>
</style>
Check the size of the image used as background for RelativeLayout or change the width of the Layout.Using the same xml with 100dp of width.
UPDATE
The maxWidth of the TextView adjust it according to design.
It looks like this:
I need to design a this type button which should have a background with another small image in the center and the text at the bottom.
While the current I am using is a textview as below
<TextView
android:id="#+id/homeButton1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#ffffff"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="center"
android:text="Button"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#drawable/button_color"
android:textStyle="bold" />
But i cannot put an image in its center.
If I use android:drawableTop
this is the image I get
How can this be feasible?
try compound drawables here is an example
<TextView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/image"
android:gravity="center"
android:text="#string/text" />
output:
Put a bellow line to your TextView xml and change "img_src" to your image.
android:drawableTop="#drawable/img_src"
UPDATE 1 :
drawableTop only support to draw above the text.
If you want to draw image on the center, here is a sample code.
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background_image" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/center_image" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:text="TextView" />
</RelativeLayout>
Check this one, works exactly as you want
<Button
android:id="#+id/btn"
style="#style/MyButton"
android:drawableTop="#drawable/btn_my"
android:text="SomeText" />
btn_my.xml // add this inside drawable folder
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_launcher"
android:state_focused="true"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_launcher"
android:state_focused="false"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_launcher" android:state_focused="true" />
<item android:drawable="#drawable/ic_launcher"
android:state_focused="false"
android:state_pressed="false" />
</selector>
copy the below into styles.xml
<style name="MyButton">
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:drawablePadding">2dp</item>
<item name="android:textSize">16dp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#ff29549f</item>
<item name="android:background">#null</item>
</style>
Here is the OUTPUT
I have a TableLayout with 2 columns: label and input field (Spinner, EditText, RadioGroup). I want to align the label for the RadioGroup to be exactly in vertical alignment with the text of the first radio button. The Text "Take it" shall be on the red line. How to do that? Is it possible?
Here is the XML - stripped down to the relevant TableRow:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layoutEditMedication1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".Main" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/buttons" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow style="#style/EditMedicationTableRowT" >
<TextView
style="#style/EditMedicationLabel"
android:layout_gravity="top"
android:text="#string/i_need_to_take" />
<RadioGroup
style="#style/EditMedicationTableRowB"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RadioButton
android:id="#+id/radioScheduleDaily"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/schedule_daily" />
<RadioButton
android:id="#+id/radioScheduleSpecial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/schedule_special" />
</RadioGroup>
</TableRow>
</TableLayout>
</ScrollView>
</RelativeLayout>
and the used styles are:
<resources>
<style name="EditMedicationTableRowT">
<item name="android:paddingTop">8dp</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="EditMedicationTableRowB">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingBottom">8dp</item>
</style>
<style name="EditMedicationLabel">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:paddingRight">16dp</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>
</resources>
I know that I could make two TableRows with two different RadioGroups each with one RadioButton and then programmatically code something that makes them look as if they where one RadioGroup. But maybe there is a simple solution.
API is 8 and up.
try this
<TextView
style="#style/EditMedicationLabel"
android:layout_gravity="top"
android:paddingBottom="0dp"
android:text="#string/i_need_to_take" />
I have created dashboard for my app. In that I added search button also. I wish to align this button to right side but for that i don't want to use the margin. I have added the image of my layout + code.
UPDATED
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical" >
<RelativeLayout style="#style/TitleBar" >
<ImageView
android:id="#+id/logo"
style="#style/TitleBarLogo"
android:layout_toRightOf="#id/titlebar"
android:contentDescription="Logo"
android:src="#drawable/logo" />
<ImageView
style="#style/TitleBarSeparator"
android:layout_toRightOf="#id/logo"
android:visibility="visible" />
<ImageButton
style="#style/TitleBarAction"
android:layout_alignParentRight="true"
android:contentDescription="Searching..."
android:onClick="onClickSearch"
android:src="#drawable/title_search" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/titlebar"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dip"
android:orientation="horizontal" >
<Button
android:id="#+id/home_btn_feature1"
style="#style/HomeButton"
android:drawableTop="#drawable/home_button1"/>
<Button
android:id="#+id/home_btn_feature2"
style="#style/HomeButton"
android:drawableTop="#drawable/home_button2"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dip"
android:orientation="horizontal" >
<Button
android:id="#+id/home_btn_feature3"
style="#style/HomeButton"
android:drawableTop="#drawable/home_button3"/>
<Button
android:id="#+id/home_btn_feature4"
style="#style/HomeButton"
android:drawableTop="#drawable/home_button4"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
UPDATED
styles.xml
<style name="TitleBar">
<item name="android:id">#id/titlebar</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">#color/title_background</item>
</style>
<style name="TitleBarLogo">
<item name="android:id">#id/title_logo</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:clickable">true</item>
</style>
<style name="TitleBarAction">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/title_button</item>
</style>
<style name="TitleBarSeparator">
<item name="android:layout_width">1px</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#color/title_separator</item>
</style>
UPDATED MY CODE AND JUST ONE STEP TO COMPLETE IT. THE SEPERATOR IS SOME HOW NOT VISIBLE.
If anyone has any idea please kindly help me.
Thank you
Try
<ImageButton
style="#style/TitleBarAction"
android:contentDescription="Searching..."
android:onClick="onClickSearch"
android:layout_alignParentRight="true"
android:src="#drawable/title_search" />
Although I would recommend looking into using the Action Bar if at all possible,
android:layout_alignParentRight="true"
should work, you could also acheive what you want by making you TitleBarLogo and magnifying glass graphic a 9-patch image that leaves the middle blank and resizes automatically without distorting the graphic.