I am using the PlaceAutocompleteFragment that is provided by google in a project that I am working on right now. But the problem is I need to display the place name that I've selected from the autocomplete widget but the whole text in not showing because the default textsize in the widget is too big. So, is there any way I can change the textsize in the PlaceAutocompleteFragment without creating my own custom search UI?
My XML code:
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.baldysns.capedbaldy.materialdesigntest.activity.DrawerMainActivity"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_drawer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:id="#+id/lnr_google_searchbar"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/btn_white_notboerder">
<fragment
android:id="#+id/place_autocompletehome_fragment"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
<FrameLayout
android:id="#+id/container_body"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:name="com.ibaax.com.ibaax.FragmentDrawer"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_drawer"
tools:layout="#layout/fragment_drawer" /></android.support.v4.widget.DrawerLayout>
And a screenshot of the problem:
Using fragment instance you can change the font size and whatever you want with the Search box EditText.. this is how you need to do
// placeAutocompleteFragment - is my PlaceAutocompleteFragment instance
((EditText)placeAutocompleteFragment.getView().findViewById(R.id.place_autocomplete_search_input)).setTextSize(10.0f);
UPDATED: 05/26/20
Looks like in latest SDK view id is changed to R.id.places_autocomplete_search_input
The autoCompleSupportFragment has an EditText Property. Which can be modified accordingly.
The name of the editText is however not very clear. In my case, it was "a"
autoCompleteFragment.a.gravity = Gravity.START
so to modify the text size, i did:
autoCompleteFragment.a.textSize = 14.0f
View fView = autocompleteFragment.getView();
Set Text, Hint Color & Size:
EditText etTextInput = fView.findViewById(R.id.places_autocomplete_search_input);
etTextInput.setTextColor(Color.WHITE);
etTextInput.setHintTextColor(Color.WHITE);
etTextInput.setTextSize(12.5f);
Set Search Custom Image:
ImageView ivSearch = fView.findViewById(R.id.places_autocomplete_search_button);
ivSearch.setImageResource(R.drawable.ic_search_white);
Set Search Text Clear Image:
ImageView ivClear = fView.findViewById(R.id.places_autocomplete_clear_button);
ivClear.setImageResource(R.drawable.ic_close_white);
Output:
Simplest
((EditText)findViewById(R.id.place_autocomplete_search_input)).setTextSize(10.0f);
in case of skadosh answer you need to first get instance of fragment.
Assuming your fragment in the Javacode is autocompleteFragment, you can use
autocompleteFragment.a.setTextSize(12.0f);
Your screen shot shows that you set margin or padding at search icon and cancel icon. remove it so it make more space for text view.
You can also use autofittextview library(https://github.com/grantland/android-autofittextview) which will make text size according to your text view size.
Related
As of now, with the official bottom sheet component from the Android design library implemented the top edge doesn't show a shadow. But for what I've seen in various mockups and in the Material Design specs, the bottom sheet include a discrete shadow of some sort.
I think the shadow would help distant the bottom sheet from the main layout, especially if there's a peek value set and/or the bottom sheet is always visible. Otherwise it just will blend together with the main layout and its items.
I've tried both ViewCompat.setElevation(bottomSheet, 5); and setting android:elevation="5dp" to the view in the XML, without success.
I know that a shadow shape doesn't have the same appearance as an elevation - but at least give it a try. The trick is to use app:layout_anchor to clip the shadow to the bottom sheet.
activity_main.xml
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:id="#+id/shadow"
android:layout_width="match_parent"
android:layout_height="16dp"
android:background="#drawable/shape_gradient_top_shadow"
app:layout_anchor="#id/bottom_sheet" />
<FrameLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />
</android.support.design.widget.CoordinatorLayout>
shape_gradient_top_shadow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#64000000"/>
</shape>
Looks like this:
EDIT
Get an even better result with a custom ShadowView:
Post from Roman Nurik on this topic: https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
Gist of the ShadowView based on Roman Nurik's solution: https://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd
Then you can do the following:
<ShadowView
android:id="#+id/shadow"
android:layout_width="match_parent"
android:layout_height="16dp"
android:gravity="bottom"
app:layout_anchor="#id/bottom_sheet" />
For API Level 21 and higher, set the following in the parent view. You can also try in the rootview of the bottomsheet (I have not tried it in the root view)
android:background="#android:color/white"
android:elevation="16dp"
If no background then can use
android:outlineProvider="bounds"
For example, I have my sheet inside a nested scroll view
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:elevation="16dp"
android:outlineProvider="bounds"
>
<include layout="#layout/bottomsheet_1" />
</android.support.v4.widget.NestedScrollView>
The trick is to use a CardView as parent and set the elevation in the CardView
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:background="#fff"
android:clickable="true"
android:focusable="true"
app:behavior_hideable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:layout_height="140dp"
app:cardElevation="8sp"
card_view:cardCornerRadius="0dp">
<!--The content of your Bottom sheet-->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
EDIT
This technique is not the best solution if you are supporting Kitkat and below. It's due to the extra margin added by the Cardview.
I think this will help you
first create bottom sheet like bellow then include in your main activity
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="56dp"
android:layout_marginTop="0.5dp" // this margin depend on shadow area
android:background="set you color"
android:elevation="20dp" // chose your custom elevation
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_marginTop="1dp" // this margin depend on max elevation
android:layout_width="match_parent"
android:layout_height="200dp">
</LinearLayout>
</LinearLayout>
I would like to put a divider line or shadow between the AutoCompleteTextView and the suggestions dropdown, pretty close to what it is done on Chrome. Here is a screenshot:
Thanks.
I think that this may be a good solution.
You just have to add a new view, with a "divider" style, as shown in the code below, and set the property dropDownAnchor equals to the id of the divider.
This is an example of the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/darker_gray">
<AutoCompleteTextView
android:id="#+id/textAutocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:padding="20dp"
android:dropDownAnchor="#+id/dropdownDivider"
android:dropDownWidth="match_parent"
android:popupBackground="#android:color/transparent"
android:hint="#string/type_words" />
<View
android:id="#id/dropdownDivider"
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#android:drawable/divider_horizontal_dark"/>
...
</LinearLayout>
The result image of this code is here.
I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!
I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>
I have problem with SlidingPaneLayout.
When I open menu (made with spl), all views (textviews, imageviews, etc.) look like these textviews on screenshot (they have strange color around text, 25th is ok - this one is green when visible):
How to fix this issue?
You just have to add the following line to your code:
mSlidingPane.setSliderFadeColor(getResources().getColor(android.R.color.transparent));
For more info see the docs
In addition to 'reVerse' answer:
set your custom color:
mSlidingPane.setSliderFadeColor(getResources().getColor(R.color.mycolor));
Important: Make sure that your slided layout has a background color (any color is okey).
This works:
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:id = "#+id/drawerContainer"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_gravity="right"
android:layout_height="match_parent"
android:background="#color/grey_light">
<!--- your content here -->
</RelativeLayout>
</android.support.v4.widget.SlidingPaneLayout>
To mimic the general grey background you can use:
<color name="grey_light">#fffafafa</color>
I'm using the searchview at the top of my activity positioned just below the action bar, the problem is that the suggestions are displayed over the searchview so the user cant see the typed the text
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v7.widget.SearchView
android:id="#+id/fragment_map.searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.SearchView>
<RelativeLayout
android:layout_below="#id/fragment_map.searchView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/map_container">
<!-- The map fragments will go here -->
</RelativeLayout>
</RelativeLayout>
no clue what the official answer even means. a work colleague aided me and I wanted to show how this can be achieved:
it can be done programatically by getting the textview as an AutoCompleteTextview:
imagine you have a searchview in xml like this:
<android.support.v7.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginRight="10dp"
android:animateLayoutChanges="true"
android:paddingLeft="0dp"
app:closeIcon="#drawable/close_x_icon"
app:queryBackground="#drawable/search_bg_expanded"
app:searchHintIcon="#drawable/empty_drawable"
app:searchIcon="#null" />
then in code do this:
val searchText = searchView.findViewById<TextView>(android.support.v7.appcompat.R.id.search_src_text) as? AutoCompleteTextView
searchText?.dropDownAnchor = searchView.id
so once you cast it to an AutocompleteTextView you can change the anchor basically.
fixed by adding this view to the bottom of the relativelayout and setting it to the anchor
<View android:id="#+id/fragment_map.dropDownAnchor"
android:layout_below="#id/fragment_map.searchView"
android:layout_width="match_parent"
android:layout_height="0dp" />