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
Related
In my android application, I have a RelativeLayout which contains some Fragments. However, this layout does not scale to different screen sizes. Consider this screenshot when the screensize is 5.2" diagonally, 1080x1920 resolution 420dpi: (Desirable output)
When I change the phone to a 5.0", 1080x1920 resolution xxhdpi, I get this display:
As you can see the buttons on the two right-hand columns are overlapping, which is the problem I am asking about.
Here is the main activity XML file, which contains the various fragments
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:style="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp">
<!--This is the box appearing at the top of the layout-->
<TextView
android:id="#+id/window"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/window_border"
android:fontFamily="monospace"
android:minLines="1"
android:text=""
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textIsSelectable="true"/>
<!--This is the first row of buttons, there are 4 of them-->
<fragment
android:id="#+id/screenOps"
android:name="net.magnistudio.deskcalculator.ScreenOps"
android:layout_width="wrap_content"
android:layout_alignEnd="#+id/digits"
android:layout_height="wrap_content"
android:layout_below="#+id/window"
tools:layout="#layout/layout_screen_ops"/>
<!--This is the 3x3 rectangle appearing directly below the screenOps
frag -->
<fragment
android:id="#+id/digits"
android:name="net.magnistudio.deskcalculator.Digits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout="#layout/layout_digits"
android:layout_alignBottom="#+id/basicOps"/>
<!--This is the rightmost fragment-->
<fragment
android:id="#+id/basicOps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="net.magnistudio.deskcalculator.BasicOps"
tools:layout="#layout/layout_basic_ops"
android:layout_alignParentEnd="true"
android:layout_below="#+id/window"/>
<!--Lower fragment, it is 6x4-->
<fragment
android:id="#+id/scientific"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="net.magnistudio.deskcalculator.Scientific"
tools:layout="#layout/layout_scientific"
android:layout_below="#+id/digits"/>
</RelativeLayout>
Each button has this style
<style name="calcBtnAppearance">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#color/calcBtn</item>
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_width">0dp</item>
</style>
I think one solution would be to adjust programatically the sizes of the layouts based on the size of the current phone, but maybe that is just sweeping some other problem (of the layout itself) under the rug?
Also, each button is located within a LinearLayout, which is inside of the LinearLayout for the fragment. Consider this sample excerpt from a fragment layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<Button
android:id="#+id/dig7"
style="#style/calcBtnAppearance"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=""/>
more buttons
</LinearLayout>
<LinearLayout>
In the RelativeLayout the children are arranged according to their relative form to each other. As far as I remember, the RelativeLayout does not scale the contained elements if the resolution or the screen size changes.
Maybe you should take a look here:
[https://stackoverflow.com/a/21381065/6908102
][1]
A possible solution:
To adjust the size of the buttons to the respective resolutions, create a separate "values" folder for each resolution. (See also picture 2 marked blue).
- Picture 2 -
Then create a new "dimens.xml" file in each of these folders.
As an example:
res/values/dimens.xml:
<resources>
<!-- ButtonSize -->
<dimen name="dimenButtonHeight">15dp</dimen>
<dimen name="dimenButtonWidth">25dp</dimen>
</resources>
res/values-xxhdpi/dimens.xml:
<resources>
<!-- ButtonSize -->
<dimen name="dimenButtonHeight">10dp</dimen>
<dimen name="dimenButtonWidth">20dp</dimen>
</resources>
Of course, you still have to adjust the size specifications to your layouts.
res/values/style.xml:
In your Style.xml file you have to add the following lines:
<style name="calcBtnAppearance">
<item name="android:textSize">14sp</item>
<item name="android:textColor">#color/calcBtn</item>
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_height">#dimen/dimenButtonHeight</item>
<item name="android:layout_width">#dimen/dimenButtonWidth</item>
</style>
Maybe that will solve your problem. Otherwise, you can, as shown in Figure 2 well, synonymous for each Resolution create a separate "layout" folder. Then copy the files from the standard layout folder into the newly created folder and adjust them or you can also position the items in a different order. But is a little more work.
I'm trying to use <include> to include ImageButtons inside a android.support.v7.widget.GridLayout. The problem is, if I don't specify all the attributes explicitly on my <include> elements, they don't display properly. In other words, the include is pointless since I have to redeclare all the attributes on every <include> element.
dialpad_button.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageButton
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_gravity="fill"
android:layout_margin="5dp"
android:scaleType="centerInside"/>
dialpad_view.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:id="#+id/dialpad_grid_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
grid:alignmentMode="alignBounds"
grid:columnCount="2"
grid:rowCount="1">
<include
android:id="#+id/dialpad_view_btn1"
android:src="#drawable/dialpad_1"
layout="#layout/dialpad_button" />
<include
android:id="#+id/dialpad_view_btn2"
android:src="#drawable/dialpad_2"
layout="#layout/dialpad_button" />
</android.support.v7.widget.GridLayout>
If I declare all the attributes directly on the <include>s, here's what it looks like in XML:
<include
layout="#layout/dialpad_button"
android:id="#+id/dialpad_view_btn1"
android:src="#drawable/dialpad_1"
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_gravity="fill"
android:layout_margin="5dp"
android:scaleType="centerInside" />
As you can see in the comparison image below, the buttons now scale properly but the images are nowhere to be seen.
And if I change the <include>s to ImageButton, things work as expected.
<ImageButton
android:id="#+id/dialpad_view_btn1"
android:src="#drawable/dialpad_1"
android:layout_width="0dp"
android:layout_height="0dp"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_gravity="fill"
android:layout_margin="5dp"
android:scaleType="centerInside" />
Is there a workaround to this?
Since I'm going to have 12 near-identical buttons in my dialpad, I'd really like to clean the XML up by including a "template" and only modifying the necessary attributes for each button (i.e. src and id).
EDIT
Trying to use styles, as suggested in one answer, did not work. None of the views that I applied the styles to get displayed. What's even more strange, even if I just apply the style to one of the views in the GridLayout, only the last view gets displayed (I've shortened down the sample code here to only two views for readability, in reality I have twelve).
Here's the style I tried using:
<?xml version="1.0" encoding="utf-8"?>
<resources
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto" >
<style name="dialPadButtonStyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="grid:layout_columnWeight">1</item>
<item name="grid:layout_rowWeight">1</item>
<item name="grid:layout_gravity">fill</item>
<item name="android:layout_margin">5dp</item>
<item name="android:scaleType">centerInside</item>
<item name="android:background">#android:color/transparent</item>
</style>
</resources>
Maybe you can use a style to declare the common attributes and then set it for every button.
<style name="dialPadButtonStyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="android:layout_columnWeight">1</item>
<item name="android:layout_rowWeight">1</item>
<item name="android:layout_margin">5dp</item>
<item name="android:src">#android:drawable/ic_menu_camera</item>
</style>
I also added: columnCount to 3 and rowCount to 4 for GridLayout and added 12 ImageButtons with that style. The final result is this:
I am using a selector working fine in all activities as you can see its XML below.
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/active_date_horizontal_5_pressed" /> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/active_date_horizontal_5_pressed" /> <!-- focused -->
<item
android:drawable="#drawable/active_date_horizontal_5" /> <!-- default -->
Except one activity, it does not work ridiculously. You can see three screenshots below which the selector works fine in the first two screenshots, and does not work in the last screen shot.
1)
2)
3)
These are customized GridViews which filled with customized BaseAdapter. Cells in the GridViews have an Xml Layout which its background is the selector. Any ideas?
It seems I solved my own problem.
You can see the Xml Layout which I am applied the selector below
<?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="60dp"
android:orientation="vertical"
android:background="#drawable/calendar_cell_selector" >
<TextView
android:id="#+id/txtWeeklyEventName"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imgCornerWeekly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/txtWeeklyEventName"
android:layout_alignRight="#+id/txtWeeklyEventName"
android:src="#drawable/corner_orange"
android:visibility="visible" />
</RelativeLayout>
You can see the background of the RelativeLayout is the selector, but the TextView fills upon the whole layout so Android cannot handle the selector.
Thus, I removed the background from the RelativeLayout and set it for the TextView, it totally works.
Thanks to me!
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"
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>