I just want to make an ImageView as my headbar ... it should just fill out his parent linear-layout.. apparently it does not.
is there any way to tell the scaleType just to fit its parent-layout? (best solution in XML) i saw the was a programming-solution which setting the scaleType to "fill" ... but there seems to be no matching xml-attribute, or didn't i see it?
<?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_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="1"
android:id="#+id/linearlayoutmain">
<ImageView
android:layout_marginTop="0dp"
android:src="#drawable/headbar"
android:id="#+id/mainheadbar"
android:scaleType="fitStart"
android:paddingTop="0dp"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
/>
</LinearLayout>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_weight="7"
android:layout_below="#id/linearlayoutmain">
</LinearLayout>
</RelativeLayout>
any thoughts/solutions about it? I thought i don't need to mind about the aspect ratio because I 9patched the whole thing.. so it shouldn't mind.
edit: it seems to work better when i use an ImageBUtton instead of an imageview... however, i got problems on lower -size screens... they seem to don't mind my 9patching... lol
You need to use three types of layouts in general
layout-hdpi
layout-mdpi
layout-ldpi
Also you need to use three values layouts in general
values-hdpi
values-mdpi
values-ldpi
Here i explain for LDPI Device Header you have to do for all you device HDPI,MDPI, etc
For example simple xml that has Image as Header : layout-ldpi - Header
<?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="50px"
android:orientation="horizontal" >
<ImageView android:id="#+id/header_main_title" android:layout_marginTop="10dip"
android:layout_width="wrap_content" android:layout_height="50dip"
android:background="#drawable/header_image"
android:layout_centerHorizontal="true" android:layout_marginRight="10dip"
/>
Similarly values-ldpi contains
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme">
<item name="android:windowTitleSize">50px</item>
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground
</item>
</style>
</resources>
Similarly for Styles.xml :
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="WindowTitleBackground" parent="android:WindowTitleBackground">
<item name="android:background">#android:color/transparent</item>
</style>
In your Manifest.xml include this Line :
<application android:icon="#drawable/vmi_icon" android:label="#string/app_name" android:theme="#style/MyTheme" >
Put the Styles.xml and Themes.xml inside of values-ldpi folder
I shown Header for ldpi device similarly you need to create for MDPI and HDPI device
changes should be made in this line of all
if it's HDPI :
<item name="android:windowTitleSize">100px</item>
If it's Mdpi :
<item name="android:windowTitleSize">70px</item>
Similarly for header.xml :
if it's HDPI :
android:layout_height="100px"
If it's Mdpi :
android:layout_height="70px"
Related
I am using a prominent app bar with an image in a fragment.
My style and xml files look like this:
theme.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MainTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/DeepSkyBlue</item>
<item name="colorPrimaryVariant">#color/DeepSkyBlueVariant</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/purple_500</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
main_activity.xml (which opens automatically the fragment):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_container_view_tag"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.example.tempapp.pkgFragments.PersonAddFragment" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_add_person.xml (which uses a layout to prevent redudancy):
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
>
<include
android:id="#+id/layoutAppBar"
layout="#layout/layout_app_bar_prominent" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
last but not least, my layout_app_bar_prominent.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- Layout tag not necessary, as we don't use any binding....-->
<com.google.android.material.appbar.AppBarLayout android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height_image_view"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--- contentScrim defines what should "appear" when the bar is not collapsed.
if not set in this case, the image will remain when bar is not collapsed-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleTextColor="?attr/colorOnPrimary"
app:expandedTitleTextColor="?attr/colorOnPrimary"
>
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
android:contentDescription="#string/app_bar_expanded_image"
/>
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
So here is my situation:
My aim is that the toolbar image (expandedImage) should appear in the statusbar also.
After researching, some suggested adding the following code in my activity in order to accomplish this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);
}
This works perfect and my image appears in my status bar:
HOWEVER, the issue I am having now, is that (when i collapse my toolbar), the title and menu icons appear behind the status bar due to the code I add above:
So there is basically no margin between the statusbar and my toolbar, which by default always exists.
If I remove the flag option, I don't have that issue anymore but then the image wouldn't appear in the status bar.
Any ideas how I could solve my issue? I've tried many solutions like:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
android:fitsSystemWindows="true"
but none of the situations worked for me...
Using CoordinatorLayout instead of ConstraintLayout for your activity will probably solve your problem.
NOTE: android:fitsSystemWindows=true is (in every subview) necessary, otherwise the app bar will never "fill" the status bar or you will experience some unexpected behaviour.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_container_view_tag"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"ยด
android:name="com.example.tempapp.pkgFragments.PersonAddFragment" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I have created a persistent bottom sheet in android with the intent of displaying a ListView containing additional information about locations. I want the sheet to have rounded corners. I got a ton of results for modal dialog but none for persistent. Is it possible or should I use the modal version?
As suggested in an answer here, I tried wrapping it in a card view but the app crashes when I try to open the fragment.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".fragments.MapFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="20dp">
<fragment
android:id="#+id/autocomplete_fragment"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/places_autocomplete_item_powered_by_google" />
</androidx.cardview.widget.CardView>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="450dp"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:layout_behavior="#string/bottom_sheet_behavior"
app:behavior_hideable="true"
app:behavior_peekHeight="55dp">
<androidx.core.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/placeholder_text"
android:textColor="#color/colorCommon_BLACK"
android:textSize="37sp" />
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
With the new Material Component library you can customize the shape of your component using the shapeAppearanceOverlay attribute.
You can use something like:
<!-- BottomSheet -->
<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">#style/CustomShapeAppearanceOverlay.MaterialComponents.BottomSheet</item>
....
</style>
<style name="CustomShapeAppearanceOverlay.MaterialComponents.BottomSheet" parent="">
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
Then you can apply this style to your single component or your theme app.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="bottomSheetStyle">#style/CustomBottomSheet</item>
</style>
If you are using a non-modal bottom sheet just apply the style. For example:
<LinearLayout
android:id="#+id/standardBottomSheet"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
style="?attr/bottomSheetStyle"
...>
U can add shape for you bottom sheet background background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/you_color"/>
<corners
android:bottomRightRadius="2dp"
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
</shape>
You could also use the app:shapeAppearance attribute:
Create a ShapeAppearance in styles.xml:
<resources>
...
<style name="BottomSheetShapeAppearance">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeTopRight">16dp</item>
</style>
</resources>
Set the app:shapeAppearance attribute on the BottomSheet component:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Widget.MaterialComponents.BottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:shapeAppearance="#style/BottomSheetShapeAppearance">
...
</LinearLayout>
Here's how it looks:
More info: https://material.io/develop/android/theming/shape
You can wrap your sheet layout with a card view to have rounded corners.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="450dp"
app:layout_behavior="#string/bottom_sheet_behavior"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:behavior_hideable="true"
app:behavior_peekHeight="55dp">
<androidx.core.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABC"
android:textSize="37sp" />
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I have a DrawerLayout with navigation menu(there is list of menu elements), I want to change some properties. Currently it looks like this
and I need something like:
So how is it possible to change color text, imageview tint, marginLeft and small green line?
List item is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/mynavigationbackground"
android:paddingLeft="20dp"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/navigation_item_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_menu_gallery"
android:tint="#109039"/>
<TextView
android:id="#+id/navigation_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gallery"
android:textStyle="bold"
android:textColor="#109039"/>
</LinearLayout>
For change background color I use these xml files:
mynavigationbackground:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/navigationactivated" android:state_pressed="true"></item>
<item android:drawable="#drawable/navigationactivated" android:state_focused="true"></item>
<item android:drawable="#drawable/navigationactivated" android:state_activated="true"></item>
<item android:drawable="#drawable/navigationnoactivated"></item>
</selector>
navigationactivated:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4064D864"></solid>
</shape>
and navigationnoactivated:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"></solid>
</shape>
I tried to use tint and margin properties in these files but it doesn't work.
Is there any way to make this effect in xml?
I tried to do it programmatically (by onClick), but still nothing.
See this answer. it could be useful.
It is about inverted colors and I see your images and one is the opposite of the other.
Invert colors of drawable Android
I'm hoping there is an xml solution to this... I am trying to create a layout that has rounded corners and then filling that layout with an image (tiled, repeat). So basically I have a LinearLayout that has a drawble layered-list assigned to the background. Here is the test layout (xml):
<?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:orientation="vertical" >
<LinearLayout
android:id="#+id/rate_buttons"
android:layout_width="100dp"
android:layout_height="50dp"
android:orientation="horizontal"
android:padding="0dp"
android:background="#drawable/test_rounded">
</LinearLayout>
</LinearLayout>
here is the test_rounded drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item ><bitmap android:src="#drawable/my_tiled_image" android:tileMode="repeat"/></item>
<item >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="3dip" android:color="#B1BCBE" />
<corners android:radius="20dip"/>
</shape>
</item>
</layer-list>
The image is overflowing at the corners of the shape/layout border. I get the following
As you can see the corners are overflowed. I heard about modifying the image part (blue pattern) in code but I have issues with that since I do modify it and animate it along the way. SO, if its at all possible to just fill in the layout with that image, please let me know. Thank you all for your help.
You can do this only programatically. But if you want to do this using xml, you have to add the background image in a layout above the rounded corner layout with the help of Relative layout and set margin. This will not give a perfect solution but will solve your problem.
The first is the XML way
Create an xml file in your respective drawable folder for the round border.
I have namedd it as popupborder.xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke android:width="2dp" />
<corners android:radius="15dip" />
</shape>
The main layout
<?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:layout_gravity="center"
android:layout_margin="10dp"
android:background="#drawable/popupborder" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp" >
<LinearLayout
android:id="#+id/property_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inner view with Background and margin"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000000" />
</LinearLayout>
</RelativeLayout>
i recommend you to use an image loader library such as universal image loader, picasso etc. Here is an example code for it:
String url = "file://" + your_file_path
com.nostra13.universalimageloader.core.ImageLoader.getInstance().displayImage(url, ivPicture, options);
You have to add
.displayer(new RoundedBitmapDisplayer(px))
to your Universal Image Loader display options.
Also there is another library (i think this is what you are looking for) https://github.com/vinc3m1/RoundedImageView
You can check this. But in second way you can get "Out of Memory Exception" cause of loading big sized image.
I hope this'll help you.
Okay I have a layout for my ListView's items:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/draweritemtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/activatedBackgroundIndicator"
android:fontFamily="sans-serif-thin"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#111"
android:textSize="20sp" />
<View
android:id="#+id/separator"
android:layout_width="fill_parent"
android:layout_height="0.2dp"
android:background="#android:color/darker_gray"
android:visibility="visible" />
</LinearLayout>
So all works fine with this setup. It shows up like this:
ITEM
-------
ITEM
-------
ITEM
-------
But I don't want the blue select color from android, so I would like to change it by changing the textviews background to #drawable/drawer_active_selector.
Here is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="#drawable/notquiteverylightgray" />
<item android:drawable="#drawable/white" />
</selector>
And my drawables
<?xml version="1.0" encoding="utf-8"?>
<resources>
<drawable name="semitransparent_white">#77ffffff</drawable>
<drawable name="verylightgray">#eee</drawable>
<drawable name="notquiteverylightgray">#ddd</drawable>
<drawable name="white">#fff</drawable>
</resources>
Now it will look like this:
ITEM
ITEM
ITEM
------
The padding is right, but the things I miss are the seperators (The <View />)
How can I get them back?
There are a couple of mistakes in your solution. By defaultListView's item clicks are handled by the ListView itself, not by the child view that was clicked. So instead of changing the TextView's background to #drawable/drawer_active_selector you should set the item selector drawable of the ListView using android:listSelector xml property or one of List.setSelector() methods. The other mistake concerns the dividers. Your solution is unnecessarily verbose. There is a much easier way to add dividers. Just use ListView's android:divider property or ListView.setDivider() method.