Develop Reference

Using <include> in android.support.v7.widget.GridLayout not displaying correctly

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:

Android translucent card/layout like timely app

I'm trying to copy this layout out of the beautiful Android Timely app
Specifically, the translucent box that has all the alarm info inside it. Not sure if it's a layout with a slightly different fill color than the background with the alpha value set really high.

I do something like this:
Manifest.xml
<activity
android:theme="#style/PopupTheme"
android:configChanges="orientation|screenSize"
android:name="your.package.Activity">
</activity>
Styles.xml
<style name="PopupTheme" parent="Theme.AppCompat.Base.CompactMenu.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:windowIsFloating">true</item>
</style>
Color.xml //You can play with the alpha value
<color name="transparent_black">#A0000000</color>
myLayout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/transparent"
android:gravity="center">
<LinearLayout
android:id="#+id/root"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp"
android:gravity="center"
android:background="#color/transparent_black">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#android:color/transparent"
android:layout_marginTop="30dp">
<Button
android:id="#+id/guardar"
style="#style/boton_aceptar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/action_save"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
And the result: the white part it's gonna be the current screen in the phone.

Dividers style does not work

The code below is a layout that I am inflating to the main layout (attached on the root):
getLayoutInflater().inflate(R.layout.event_buttons, (ViewGroup) helperView, true );
setContentView(helperView);
However although having style="?android:attr/buttonBarStyle" the dividers are not displayed and they are transparent. There are "gaps" between the buttons but their color is transparent. If I configure the background of the linearlayout to a solid color, that color visible inside the gaps. Now it has a default background is #null as shown in the Graphical Layout.
<!-- This is my layout/event_buttons.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/eventDisplayButtons"
style="?android:attr/buttonBarStyle" // the style
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom"
android:divider="?android:attr/dividerHorizontal" // this is not really necessary
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/open_link_button"
style="?android:attr/buttonBarButtonStyle" // child style
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/btn_white"
android:drawablePadding="-2dp"
android:drawableTop="#drawable/ic_menu_link"
android:paddingTop="3dp"
android:text="#string/open_link"
android:textColor="#color/darkGrey"
android:textSize="#dimen/event_buttons_text_size" />
//two more buttons here
</LinearLayout>
I was thinking if my style/theme affects the dividers and they become transparent:
<style name="MyTheme.TranslucentActionBar" /* the parent of MyTheme is android:Theme.Holo.Light */>
<item name="android:actionBarStyle">#style/MyTheme.ActionBar.Transparent</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="MyTheme.ActionBar.Transparent" parent="#android:style/Widget.Holo.Light.ActionBar>
<item name="android:background">#android:color/transparent</item>
<item name="android:icon">#android:color/transparent</item>
</style>
Assuming I have this theme how can solve this problem with the dividers?

Need help in Dashboard in Android

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.

Changing TabView default colours and search bar default colours

okay i'm looking for a way to be able to change the orange colour that appears when you click on a tab in Android TabView
and change the orange border colour around a search bar... anyideas how to do something like that?
thats my main tab View
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:background="#drawable/gradient_bg"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
and i have this for my search bar
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/searchText"
android:hint="#string/Search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/searchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/Search"
android:src="#drawable/search"
android:onClick="search"/>
</LinearLayout>
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector" />
any ideas ???
Thanks alot for all ur help!!!!

You need to use themes. You can setup a style.xml in res/values and inherit from Holo and override the properties you need to. I did this for the Tab's in the action bar:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="Theme.Mine" parent="android:style/Theme.Holo">
<item name="android:actionBarTabStyle">#style/MyActionBarTabStyle</item>
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
<item name="android:selectableItemBackground">#drawable/ad_selectable_background</item>
<item name="android:popupMenuStyle">#style/MyPopupMenu</item>
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/ad_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">#drawable/ad_btn_radio_holo_light</item>
</style>
<style name="MyActionBarTabStyle" >
<item name="android:background">#drawable/actionbar_tab_bg</item>
<item name="android:textColorHighlight">#FF5555</item>
<item name="android:paddingLeft">10dip</item>
<item name="android:paddingRight">10dip</item>
</style>
<style name="TableCellStyle" parent="Theme.Mine">
<item name="android:textColor">#000000</item>
<item name="android:textSize">15sp</item>
</style>
</resources>
Then you can reference this theme in your manifest file. You can read all about it here: http://developer.android.com/guide/topics/ui/themes.html