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:
Related
I've searched here and it doesn't seem like anyone has had this problem.
I'm following the Android Studio tutorials from here.
Basically what is happening is that my buttons look fine when I implement my XML code, but when I transfer over some of the XML code to my styles.xml and import it into my activity_main.xml file, my button changes its dimensions.
Here's my activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical"
android:padding="16sp"
tools:context=".MainActivity"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:contentDescription="#string/minus_button"
android:background="#drawable/button_background"
android:onClick="decreaseScore" />
<ImageButton
android:id="#+id/increaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:layout_alignParentEnd="true"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team1_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:background="#drawable/button_background"
android:contentDescription="#string/minus_button"
android:onClick="decreaseScore"
/>
<ImageButton
android:id="#+id/increaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team2_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_2"/>
</RelativeLayout>
</LinearLayout>
My strings.xml file.
<resources>
<string name="app_name">Scorekeeper</string>
<string name="team_2">Team 2</string>
<string name="initial_score">0</string>
<string name="plus_button">Plus Button</string>
<string name="minus_button">Minus Button</string>
<string name="team_1">Team 1</string>
</resources>
drawable.ic_minus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13H5v-2h14v2z"/>
</vector>
drawable.ic_plus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
drawable.button_background:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="#color/colorPrimary"/>
</shape>
I hope I have not missed anything out. If you copy paste my code inside an empty activity activity_main.xml file, you should see something like this.
Now the problem:
I want to implement some styles for my buttons. I have updated my styles.xml as such. In this case I have a parent ScoreButton which only takes the background, whereas the child elements are the plus and minus, which takes the picture and description.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
</style>
<style name="PlusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_plus</item>
<item name="android:contentDescription">#string/plus_button</item>
</style>
<style name="MinusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_minus</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
</resources>
And if I update one of my button's code as such, for instance, replacing #+id/decreaseTeam1 with the code below:
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
style="#style/PlusButtons"
android:onClick="decreaseScore" />
The minus button suddenly becomes inflated.
I read that child views override parent views, but I don't see how that can be a problem, since there is no change to the image size, nor have I compressed it.
The problem is that in the style definition, your ScoreButtons has Widget.AppCompat.Button as parent. This style defines a minHeight and minWidth, as follows:
<style name="Base.Widget.AppCompat.Button" parent="android:Widget">
<item name="android:background">#drawable/abc_btn_default_mtrl_shape</item>
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">88dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
</style>
So, in order to solve your problem, you just have to remove the parent from ScoreButtons style:
<style name="ScoreButtons">
<item name="android:background">#drawable/button_background</item>
</style>
You have an error in your style. You are using an ImageButton not a Button
So, you should write
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton"> // ImageButton
<item name="android:background">#drawable/button_background</item>
</style>
you are making a mistake while assigning a style. you need to use ImageButton instead of using Button.
Use this:
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
Instead of this:
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
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 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 want to center a RelativeLayout which contains TextViews in a ScrollView but when I change to Landscape mode or even in portrait mode with a small screen, the button of the RelativeLayout is cutted... Have you any idea to center it without be cutted please??
Here my code:
<ScrollView
style="#style/scroll"
android:background="#drawable/first_body_shape" >
<RelativeLayout style="#style/relativeLay"
android:layout_gravity="center_vertical" >
<TextView
android:id="#+id/rg2"
style="#style/verset"
android:layout_below="#+id/rg1"
android:text="#string/rg_2" />
<TextView
android:id="#+id/rg3"
style="#style/textView_intro"
android:layout_below="#+id/rg2"
android:text="#string/rg_2_1" />
<TextView
android:id="#+id/rg4"
style="#style/verset"
android:layout_below="#+id/rg3"
android:text="#string/rg_3" />
<TextView
android:id="#+id/rg5"
style="#style/textView_intro"
android:layout_below="#+id/rg4"
android:text="#string/rg_3_1" />
<TextView
android:id="#+id/rg6"
style="#style/verset"
android:layout_below="#+id/rg5"
android:text="#string/rg_4" />
<TextView
android:id="#+id/rg7"
style="#style/textView_intro"
android:layout_below="#+id/rg6"
android:text="#string/rg_4_1" />
<TextView
android:id="#+id/rg8"
style="#style/textView_intro"
android:layout_below="#+id/rg7"
android:text="#string/rg_5" />
<TextView
android:id="#+id/rg1"
style="#style/textView_intro"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/rg_1" />
</RelativeLayout>
</ScrollView>
styles.xml
<style name="scroll">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_marginBottom">10sp</item>
<item name="android:layout_marginLeft">10sp</item>
<item name="android:layout_marginRight">10sp</item>
<item name="android:layout_marginTop">50sp</item>
</style>
<style name="relativeLay">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="verset">
<item name="android:layout_width">370sp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:paddingTop">10sp</item>
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
</style>
I'm not sure to understand your problem (i don't see any button in your code :o).
But have a look on this tutorial :
http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/
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.