Android translucent card/layout like timely app - android

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.

Related

RelativeLayout doesn't fill the screen horizontally

I have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_container"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/app_name"
android:text="#string/app_name"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:textColor="#FF000000"
android:singleLine="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
I expected the layout to extend to the edges of the screen, but instead here's what I get:
The declared theme is Theme.K9Dialog:
<resources>
<style name="Theme.K9Dialog" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowFrame">#null</item>
<item name="android:windowBackground">#drawable/popup_background</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowContentOverlay">#drawable/panel_separator</item>
</style>
Am I misunderstanding what android:layout_width is supposed to do?
This is happening because of <item name="android:windowIsFloating">true</item> in your app theme, should work fine after removing that. Also I am not why you need all those attributes like android:windowFrame and ndroid:windowAnimationStyle in your app theme. If there is no such requirement try using default app theme and add only those attributes to theme which you want to change .

Add shadow to custom dialog

I want to add shadow to my custom dialog. But how to remove this white border? Help me please)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="300dp"
android:background="#android:drawable/dialog_holo_light_frame"
android:orientation="vertical" >
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/brown"
android:gravity="top|center"
android:text=""
android:textColor="#color/white" />
...
</LinearLayout>
Add custom style
<style name="Theme.CustomDialog" parent="#android:style/Theme.Translucent.NoTitleBar">
<item name="android:windowIsFloating">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:padding">10dp</item>
<item name="android:background">#ff90ff90</item>

Error when Setting transparent background for Android Activity

I created an Activity (which has and YoutubePlayerView and other image) with transparent background using
following code:
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.9</item>
After compiling, background is Dimmed correctly with DimAmount = 0.9. BUT, my VideoView also dimmed
with same dimAmount.
Full xml for my Activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#33000000"
android:orientation="vertical" >
<com.google.android.youtube.player.YouTubePlayerView
android:id="#+id/youtube_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/other_views"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/ads" />
</LinearLayout>
How Can I fix it.
Thanks!
Put this theme in the activity tag in your project's manifest.
android:theme="#android:style/Theme.Translucent.NoTitleBar"
it will make your activity completely transparent.
Then set the background of the root layout oht that activity in black with some alpha according to your requirement using this.
android:background="#33000000"
Change 33 as per your requirement.
It will dim the background things without effecting other views.
Hop this works for you.

Refrencing a selector drawable from a style results blank imagebutton

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>

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

Categories

Resources