I tried to make table layout like this in the Android.
First column - 2 buttons, next column one button in second row. The size of the buttons should be the same. I use 0 width and weight 1 and stretch the columns.
In the XML:
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:stretchColumns="*" >
<TableRow>
<Button
android:id="#+id/button_stereo_system_state"
style="#style/StyleButton"
android:background="#drawable/background_button_off"
android:drawableTop="#drawable/icon_button_on_off"
android:text="#string/button_text_option_off" />
<Button
android:id="#+id/button_stereo_system_radio"
style="#style/StyleButton"
android:background="#drawable/background_button_off"
android:drawableTop="#drawable/icon_button_play"
android:text="#string/button_text_play_radio" />
</TableRow>
<TableRow>
<Button
android:id="#+id/button_stereo_system_cd"
style="#style/StyleButton"
android:layout_column="0"
android:background="#drawable/background_button_off"
android:drawableTop="#drawable/icon_button_play"
android:text="#string/button_text_play_cd" />
</TableRow>
</TableLayout>
In the style:
<style name="StyleButton">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_margin">10dip</item>
<item name="android:textSize">19sp</item>
<item name="android:textColor">#color/color_text_button</item>
</style>
With this source code in second row button is stretched and takes the whole row. How to make this?
One solution (as you speculate in your comment) is to add another button the same as the rest and set the visibility to invisible. (See docs here).
Basically simply add the following line to your XML:
android:visibility="invisible"
Related
I'm having trouble with the layout of my Android app.
The graphical preview editor shows me an image like (and this is how I want it to look like):
I am using a table layout that looks like this:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:shrinkColumns="*"
android:stretchColumns="*" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
android:padding="5dp" >
<TextView
style="#style/leftColumn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Branche" />
<TextView
android:id="#+id/textViewBranche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/rightColumn"
android:text="Branche"
/>
</TableRow>
</TableLayout>
styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- ... -->
<style name="leftColumn">
<item name="android:background">#2B60DE</item>
<item name="android:textColor">#ffffff</item>
</style>
<style name="rightColumn">
<item name="android:background">#C0C0C0</item>
<item name="android:textColor">#ffffff</item>
</style>
</resources>
If I run my app it looks like this:
As you can see only one text view is displayed. I would like the table layout to have 2 columns (just like in the preview). The first one (blue) indicating what I am displaying and the second (grey) the information provided by my adapter. However I only see the provided information of my adapter (in this case "sonstige (others)". So basically I only see the right column.
I have no idea why I can't see the content of the first text view (respectively the first row).
I played around with some properties like layout_width and layout_height but it doesn't change.
I'm running this app on my S3.
Any help would greatly be appreciated.
Cheers
I want to have a ImageButtons changing the image based on its state. (same as "like" button in nine gag and facebook apps).
I have defined a style for each of them that references a selector as a drawable but when I run the program, images doesn't appear. Can you tell me what's wrong with this approach? (sorry for my bad English)
comment_actions_style in values folder:
<style name="LikeStyle">
<item name="android:src">#drawable/like</item>
</style>
<style name="DislikeStyle">
<item name="android:src">#drawable/dislike_normal</item>
</style>
<style name="ReplyStyle">
<item name="android:src">#drawable/reply_normal</item>
</style>
<style name="ShareStyle">
<item name="android:src">#drawable/share</item>
</style>
</resources>
and like drawable in drawable folder: (other buttons are the same)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/like_clicked" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/like_focused" android:state_focused="true"/>
<!-- focused -->
<item android:drawable="#drawable/like_normal"/>
<!-- default -->
</selector>
EDIT:
I forgot to mention, I have a list view that its items are user comments and comments have buttons described above.
here is my items layout (part of it)
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" />
</LinearLayout>
and comment_actions layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/comment_action"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="5dip">
<ImageButton
android:id="#+id/comment_action_img"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#android:color/transparent"
/>
<TextView
android:id="#+id/comment_action_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/comment_action_img"
android:gravity="center"
android:layout_marginLeft="5dip"/>
</RelativeLayout>
These buttons also inherit from a layout if that's matter.
Here, your are setting style for comment_actions layout, and it is a Relative Layout, which won't be abled to response to your "android:src" attribute.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/comment_content"
android:orientation="horizontal"
>
<include
android:id="#+id/like"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
layout="#layout/comment_actions"
style="#style/LikeStyle" /> <!--here,you are setting a style for the RelativeLayout -->
</LinearLayout>
I have around 6 images which i am using as tabs in my application.Its just images and they aren't the tabs that android provides.
So my question is that when i click on a image i want replace the image with a another image so that it can let user know that which tab is selected.
What i am did was creating different xml for this it in my layout.But its tedious to do so since I can't be creating different xml's for every image.
What i am trying to do now is using for this but not getting the result.
How is it possible to use for this ?
Its quite simple.You dont have to make different xml for each image/tab.you just have to make one xml and include this xml in every xml which needs these images..in the xml set only one image as selected and the rest unselected.Suppose for the image1 keep image1 selected and the rest unselected.by clicking image2 will redirect to activity2.In activity2 set image2 selected and the rest unselected and the same for the remaining activities.This way will be the easiest way.Trust me i have implemented this and will help you too.any sort of queries you can ask me.
i have done with 4 images but in your case there will be 6.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/btn1"
style="#style/toolButton"
android:background="#drawable/image1"
android:gravity="center"
/>
<Button
android:id="#+id/btn2"
style="#style/toolButton"
android:background="#drawable/image2"
android:gravity="center"
/>
<Button
android:id="#+id/btn3"
style="#style/toolButton"
android:background="#drawable/image3"
android:gravity="center"/>
<Button
android:id="#+id/btn4"
style="#style/toolButton"
android:background="#drawable/image4"
android:gravity="center"
/>
</LinearLayout>
</RelativeLayout>
And here is style.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="toolButton">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">45dip</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_weight">5</item>
<item name="android:layout_marginBottom">0dip</item>
<item name="android:layout_marginTop">0dip</item>
</style>
</resources>
how can I set my buttons in a linearLayout dynamically? So I want that all android mobiles with different display sizes can use my app.
Code
<LinearLayout android:id="#+id/linear_layout_main2" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal">
<Button android:id="#+id/bt1" android:text="GO"
style="#style/button_font" android:clickable="false"
android:background="#drawable/box1"
android:layout_marginLeft="6px" />
<Button android:id="#+id/bt2" android:text="ON"
style="#style/button_font" android:clickable="false"
android:background="#drawable/box1"
android:layout_marginLeft="6px" />
</LinearLayout>
Style-Code
<style name="button_font" parent="#android:style/TextAppearance.Medium">
<item name="android:layout_width">44px</item>
<item name="android:layout_height">39px</item>
<item name="android:textColor">#ffffffff</item>
<item name="android:textSize">18px</item>
<item name="android:layout_gravity">center_vertical</item>
</style>
You can use android:layout_weight = "1" for two button, then it take same screen ratio.
Means 1:1 ratio is put for the two buttons. So it works in all screen sizes.
I have a 'dialog' Activity based on the built-in Android theme Theme.Dialog:
<style name="Theme.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowTitleStyle">#android:style/DialogWindowTitle</item>
<item name="android:windowBackground">#android:drawable/panel_background</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="textAppearance">#android:style/TextAppearance</item>
<item name="textAppearanceInverse">#android:style/TextAppearance.Inverse</item>
<item name="textColorPrimary">#android:color/primary_text_dark</item>
<item name="textColorSecondary">#android:color/secondary_text_dark</item>
<item name="textColorTertiary">#android:color/tertiary_text_dark</item>
<item name="textColorPrimaryInverse">#android:color/primary_text_light</item>
<item name="textColorSecondaryInverse">#android:color/secondary_text_light</item>
<item name="textColorTertiaryInverse">#android:color/tertiary_text_light</item>
<item name="textColorPrimaryDisableOnly">#android:color/primary_text_dark_disable_only</item>
<item name="textColorPrimaryInverseDisableOnly">#android:color/primary_text_light_disable_only</item>
<item name="textColorPrimaryNoDisable">#android:color/primary_text_dark_nodisable</item>
<item name="textColorSecondaryNoDisable">#android:color/secondary_text_dark_nodisable</item>
<item name="textColorPrimaryInverseNoDisable">#android:color/primary_text_light_nodisable</item>
<item name="textColorSecondaryInverseNoDisable">#android:color/secondary_text_light_nodisable</item>
<item name="textColorHint">#android:color/hint_foreground_dark</item>
<item name="textColorHintInverse">#android:color/hint_foreground_light</item>
<item name="textColorSearchUrl">#android:color/search_url_text</item>
<item name="textAppearanceLarge">#android:style/TextAppearance.Large</item>
<item name="textAppearanceMedium">#android:style/TextAppearance.Medium</item>
<item name="textAppearanceSmall">#android:style/TextAppearance.Small</item>
<item name="textAppearanceLargeInverse">#android:style/TextAppearance.Large.Inverse</item>
<item name="textAppearanceMediumInverse">#android:style/TextAppearance.Medium.Inverse</item>
<item name="textAppearanceSmallInverse">#android:style/TextAppearance.Small.Inverse</item>
</style>
My layout for the Activity, I have a single EditText, a single Button and an invisible TextView I use to display messages to the user based on the validity of the EditText content:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp">
<TextView
style="#style/DialogMessage"
android:id="#+id/error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:visiblity="gone" />
<EditText
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLength="100"
android:maxLines="1"
android:ems="20"
android:scrollHorizontally="true" />
<Button
android:id="#+id/rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
When the user is in portrait mode, and they enter some 'bad' text in the EditText, I make the TextView visible, and populate it with an appropriate error message. This works fine, as everything shifts down, and the TextView is displayed great, even if the content spans multiple lines. Now, in landscape, when I do the same, the TextView displays fine, but the bottom element (in this case the Button) is compressed to about half it's normal height. Moving the elements around, if I put the EditText at the bottom, when the TextView is made visible, it too is compressed, and puttint the TextView at the bottom results in anything more than a single line of text being cut off.
I have tried forcing the issue after the TextView is populated by re-setting the sizes of the LinearLayout via:
LinearLayout dialog = (LinearLayout) findViewById(R.id.dialog);
dialog.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
And I have tried re-drawing the LinearLayout after the TextView is populated by calling:
LinearLayout dialog = (LinearLayout) findViewById(R.id.dialog);
dialog.invalidate();
Neither worked. Any ideas what is going on here?
Thanks,
Paul
Edit:
There is ample screen real-estate to show all three components fully... as a fully inflated TextView with the same content as I am dynamically inflating, and everything displayed fully.
Didn't figure out why this was happening, but figured out a work-around. Switching the layout to a RelativeLayout solved the issue, and everything is now displayed properly using the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp">
<EditText
android:id="#+id/inpt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text|textCapWords"
android:maxLength="100"
android:maxLines="1"
android:ems="20"
android:scrollHorizontally="true" />
<Button
android:id="#+id/btn_rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/inpt_title"
android:layout_below="#id/inpt_title" />
<TextView
style="#style/DialogMessage"
android:id="#+id/error"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#id/btn_rename"
android:layout_alignLeft="#id/inpt_title"
android:layout_alignRight="#id/inpt_title" />
</RelativeLayout>