I am trying to make a transparent background header for close button. The background header is working as expected, however the background layout can see the visible and button is also not clear.
Am trying to build like this below picture
https://ibb.co/CVgrzjq
My code is as follows:
Activity Code
final BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.BottomSheetMainStyle);
`dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
`dialog.show();
Layout Code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:gravity="center|top"
android:orientation="vertical">
<ImageView
android:id="#+id/img_close"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:clickable="true"
android:forceDarkAllowed="false"
android:paddingBottom="#dimen/dimen_8"
android:src="#drawable/bottom_close"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="#id/img_close"
android:background="#drawable/rounded_dialog"
app:background="#color/bkgcolor"
android:orientation="vertical">
<!-- All your required widgets here-->
</RelativeLayout>
</RelativeLayout>
Activity code
final BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.trans_bg_dialog);
`dialog.show();
Add this in your style.xml file
<style name="trans_bg_dialog" parent="#style/Theme.AppCompat.Dialog">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
</style>
Related
I have number of Edit Texts in the layout file, the soft keyboard is covering some of the Edit texts. I want whole Edit texts should scroll up if user clicks on first edit text so that all the fields should be visible at a time. I tried adding ScroolView,isScrollContainer,orientation:vertical, requestFocus, android:imeOptions="flagNoFullscreen" in xml file and android:windowSoftInputMode="adjustPan|adjustResize" is added in Manifest. But not getting expected results.
here is my xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:background="#drawable/register_back"
tools:context="com.example.RegisterActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/registerFieldsRL"
android:layout_marginTop="40dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/header"
android:text="Register"
android:textAllCaps="true"
android:textColor="#646b99"
android:textSize="18dp"
android:gravity="center"
android:layout_centerHorizontal="true" />
<EditText
android:id="#+id/nameET"
android:hint="Enter Your Name"
android:layout_below="#+id/header"
style="#style/editTextStyle"
android:layout_marginTop="10dp"
android:singleLine="true"/>
<EditText
android:id="#+id/emailET"
android:hint="Enter Your Email Id"
android:layout_below="#+id/nameET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<EditText
android:id="#+id/mobileET"
android:hint="Enter Your Mobile Number"
android:layout_below="#+id/emailET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<EditText
android:id="#+id/passwordET"
android:hint="Enter Password"
android:layout_below="#+id/mobileET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<EditText
android:id="#+id/confrm_passwordET"
android:hint="Re-enter Password"
android:layout_below="#+id/passwordET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<Button
android:layout_width="200dp"
android:layout_height="40dp"
android:id="#+id/logon_button"
android:text="Logon"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/confrm_passwordET"
android:layout_marginTop="7dp"
android:background="#db96a3"
android:textColor="#e8d3c1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/social_loginsRL"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/social_login_header"
android:text="- OR LOGIN WITH -"
android:layout_centerHorizontal="true"
android:textColor="#646b99"
android:textSize="18dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_below="#+id/social_login_header"
android:layout_marginTop="10dp">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/facebook_button"
android:background="#drawable/fbbutton"
android:layout_toLeftOf="#+id/social_login_split_view"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:id="#+id/social_login_split_view"></View>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gmail_button"
android:background="#drawable/gmailbutton"
android:layout_toRightOf="#+id/social_login_split_view" />
</RelativeLayout>
</RelativeLayout>
and here is my Style code
<style name="editTextStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/edittext_background</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:backgroundTint">#e8d3c1</item>
<item name="android:textColor">#646b99</item>
</style>
and this is my Drawable file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/patient_details_et_background"/>
<item>
<shape>
<stroke
android:width="1dp"
android:color="#d4c6c1" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Tara, from what i understand from your question, (maybe i am wrong) that you want all edit text's in your layout to scroll up and be in focus whenever u receive a click on any of the EditText's?
Lets say you have 10 EditText's in your layout, and user clicks the 1st one, if all the EditText's scroll up, the item on which the user clicked also moves from focus. This would not be good for the user, as they wont be able to edit on the actual field on which they clicked.
As for the problem, i would say to put all your EditText's inside a ScrollView and put a attribute, android:fillViewport="true" on the scroll view. This will not solve the problem, but you will be able to see the full length and items inside the scroll view on the preview pane.
The soft keyword will cover some area of the screen once it pop's up, but you should be make sure that the user can scroll across each view in your layout.
I want to style the action bar and footer using the background image of header and footer respectively. When it comes to the execution by modifying the layout, it seems there are white spaces which is not pleasant for the appearance. All of my images uses png files with transparent background. Are there any methods for modifying the transparency of the header and footer background ? The below os my relative layout structure :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#android:color/transparent" >
<!-- Header aligned to top -->
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#drawable/heading"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fixed Header"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
<!-- Footer aligned to bottom -->
<RelativeLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/footer"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="Fixed Footer"
android:textColor="#000"
android:textSize="20sp" />
</RelativeLayout>
<!-- Scrollable Item below header and above footer -->
<ScrollView
android:id="#+id/scrollableContents"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:background="#ff5" >
<!-- Inflate the contents of the ScrollView dynamicaly -->
</ScrollView>
</RelativeLayout>
The white part of your header & footer comes from activity background (because listview is below header and above footer) which could be changed by using styles :
Define custom color in res/values/colors.xml
<color name="custom_theme_color">#b0b0ff</color>
Create a style in res/values/styles.xml
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#color/custom_theme_color</item>
<item name="android:colorBackground">#color/custom_theme_color</item>
</style>
(windowBackground can be a drawable reference too)
Set this style to your activity in Manifest.xml :
<activity
android:name="myActivity"
android:theme="#style/CustomTheme">
For more details see Android Styles and Themes
I want to show transparent blurred tabs, so that listactivity screen behind it shows blurred images
And tabs without divider.
I found a solution by removing item selector background from deselect event and the image you want to set in background of tab group just use that image by using set background resource.
In selector make change
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected_tab" android:state_selected="true" />
<item android:drawable="#android:color/transparent" />
</selector>
in tab host make following change
<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"
android:background="#000000" >
<RelativeLayout
android:id="#+id/linearLayoutTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
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"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-10dp"
android:tabStripEnabled="true"
android:background="#drawable/unselected_tab"/>
</RelativeLayout>
</TabHost>
I have an app that I am putting together and I have a background on it. There is a header on top and a ListView in the middle. When I have a list in the middle that isn't at least as big as the screen it just shows gray not the background of the parent layout. The weird thing is that this doesn't happen on my older phone, the background fills the whole screen even if the list doesn't. Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the xml for HomeActivity, more information in HomeActivity.java -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/common_aboutLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg">
<!-- This is the header on the top of the home screen -->
<LinearLayout android:id="#+id/dynamicBanner"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/header"
android:layout_width="fill_parent">
<!-- This is the temp pop-up on start -->
<TextView android:text="#+id/TextView01"
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:textColor="#FFFFFF"
android:visibility="invisible"
android:textStyle="bold"
android:typeface="sans"
android:ellipsize="end"
android:textSize="18sp"
android:gravity="center_vertical|center_horizontal">
</TextView>
</LinearLayout>
<!-- This is the layout of the list of ringtones. -->
<ListView android:id="#+id/homeListView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ListView>
<LinearLayout android:id="#+id/adLayout"
android:layout_width="fill_parent"
android:layout_height="0dp">
<com.admob.android.ads.AdView android:id="#+id/ad"
admob:textColor="#FFFFFF"
admob:keywords="Android application"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center"
admob:backgroundColor="#666666"
admob:refreshInterval="30"
android:layout_height="0dp" />
</LinearLayout>
</LinearLayout>
The TextView is just a temp thing when the window first opens.
Just looking for some help, Thanks.
put All views in RelativeLayout.then put this admob layout and add a tag to plcae this to bottom of layout
like
android:layout_alignParentBottom="true"
<LinearLayout android:id="#+id/adLayout"
android:layout_width="fill_parent"
android:layout_height="0dp">
<com.admob.android.ads.AdView android:id="#+id/ad"
admob:textColor="#FFFFFF"
admob:keywords="Android application"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center"
admob:backgroundColor="#666666"
admob:refreshInterval="30"
android:layout_height="0dp" />
</LinearLayout>
and then Header part inside the relative layout
android:layout_alignParentTop="true"
and the put the ListView and
android:layout_above="#+id/adLayout"
android:layout_below=HEADERVIEW
So android goes out of its way to build this nice UI guide for everyone to use. But I don't see anywhere where it shows code examples of how to build these elements.
The UI guidelines for tabs can be found here. http://developer.android.com/design/building-blocks/tabs.html.
Does anyone know how to create tabs likes the this one?
Any help would be appreciated, thanks.
SOLUTION POSTED
Ok, so here is what I ended up doing after probably wasting about 10 hours trying to make some good looking tabs.
First I scrapped the whole idea of using android's implementation of tabs. For one reason the tab host widget is suppose to deprecated for the action bar, but the action bar only works from android 3 on.
I finally figured out that if a used a linear layout and as the background for the linear layout i put the image I wanted to use (using a 9 patch image). Then create another linearlayout and textview in order to put text over top of that linearlayout. Then make your linear layout clickable. Then as you get more advanced you can make you linear layout background a xml selector and you are good to go. Incase you didn't get all that here is my code.
LinearLayout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/main_screen_bg_color"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/selector_not_current"
android:clickable="true"
android:onClick="onClickSub"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Example 1"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/selector_current"
android:clickable="true"
android:onClick="onClickFoodDetails"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Example 2"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Example Selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/selected_pressed_tab" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/selected_pressed_tab" /> <!-- focused -->
<item android:drawable="#drawable/selected_tab" /> <!-- default -->
Hope this helps everyone. Android tabs were just too difficult an annoying to work with that it was easier just to make my own from scratch. Good Luck!
do something like this.
this is a full working code. enjoy
somewhere in oncreate method of activity extending Tabactivity
tabHost = getTabHost();
Intent intent;
intent = new Intent().setClass(this, FirstActvity.class);
setupTab("NearBy", intent, R.drawable.firsttabdrawable);
intent = new Intent().setClass(this, SecondActivity.class);
setupTab("History", intent, R.drawable.secondtabdrawable);
intent = new Intent().setClass(this, ThirdActivity.class);
setupTab("Setting", intent, R.drawable.thirdtabdrawable);
define setupTab methods as
private void setupTab(String tag, Intent intent, int selectorId) {
View tabView = LayoutInflater.from(tabHost.getContext()).inflate(R.layout.view, null);
tabView.setBackgroundResource(selectorId);
TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(tabView).setContent(intent);
tabHost.addTab(setContent);
}
view.xml as
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</LinearLayout>
and firsttabdrawable.xml in drawable folder as
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/selectedfirsttabimage"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/notselectedfirsttabimage" />
</selector>
define secondtabdrawable.xml and thirddrawable.xml in the same way
The tabs you need are part of the ActionBar. Specifically they are displayed when the ActionBar is in Navigation Tab mode.
http://developer.android.com/guide/topics/ui/actionbar.html
(see under "Adding Navigation Tabs")
You may want to use www.ActionbarSherlock.com which is a library that will give you the ActionBar on nearly all versions of Android. It works the same as the official one, and includes the tabs.
Do not use the TabActivity any more, it's old and being deprecated. ActionBar is the future.