ShapeableImageView takes a ShapeAppearanceOverlay item in style to create desired shapes and sizes. The shape families are cut and rounded, radius can be used as a number or in percentages.
Here is my ShapeAppearanceOverlay theme for circularImageView:
<style name="ShapeAppearanceOverlay.App.circleImageView" parent="">
<item name="cornerFamily">cut</item>
<item name="cornerSize">50%</item>
</style>
Here Is the layout where I am using it:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="240dp" />
<!--Top Header Layout-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/topbar"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--Top Profile Section -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/user_display_image"
style="#style/ShapeAppearanceOverlay.App.circleImageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_user" />
</LinearLayout>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/normal_bottom_margin" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
Here is a screenshot of the issue:
Screenshot from IDE:
Use app:shapeAppearanceOverlay instead of style
<com.google.android.material.imageview.ShapeableImageView
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.App.circleImageView"
.../>
Or if you want to use it through style attribute :
<style name="Style.App.circleImageView" parent="">
<item name="shapeAppearance">#style/ShapeAppearanceOverlay.App.circleImageView</item>
</style>
<style name="ShapeAppearanceOverlay.App.circleImageView" parent="">
<item name="cornerFamily">cut</item>
<item name="cornerSize">50%</item>
</style>
...
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/user_display_image"
style="#style/Style.App.circleImageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_user" />
...
Related
How can I align text with the icon? It is working fine if I remove parent property but it is being used by some other activity so I cannot remove it. I think I might have messed up somewhere in layout xml file but couldn't find it out.
styles.xml
<style name="DarkToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/whateever</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
<item name="colorControlNormal">#android:color/white</item>
</style>
<style name="LightPopupMenu">
<item name="android:background">#android:color/white</item>
<item name="android:textColor">#android:color/black</item>
<item name="overlapAnchor">false</item>
</style>
layout.xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/c_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/window_background_dark">
<androidx.appcompat.widget.Toolbar
android:id="#+id/move_pick_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/DarkToolbar"
app:popupTheme="#style/LightPopupMenu"
android:elevation="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/move_wf_pick_toolbar_title"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="center"
tools:text="Token: 123" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
<FrameLayout />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Current behaviour:
is there a way to achieve this without removing parent attribute?
I want to modify my action bar. I want action bar with round edges.
I am providing some information about action bar and Theme style.
Hope you understand what i want
my themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.AIT" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</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/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="Theme.AIT.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.AIT.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.AIT.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Here i am providing toolbar.xml
Here is coding of toolbar. I have created this toolbar with sky blue (#2398f4) background color.
<?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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:theme="#style/Theme.AIT.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:elevation="2dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#2398f4"
app:popupTheme="#style/Theme.AIT.PopupOverlay"
app:elevation="0dp"
>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Help me to create action bar with round edges.
The following is only an example of how to wrap a Toolbar with a CardView to make it round edged:
<!-- Use a normal CardView instead of my implementation -->
<xallosh.xproject.xmusic.views.MusicCardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center"
android:padding="4dp"
android:layout_margin="4dp"
android:layout_centerHorizontal="true"
app:musicCardUseCompatPadding="true"
app:musicCardBackgroundColor="?colorPrimary"
app:musicCardCornerRadius="5dp"
app:musicCardElevation="4dp"
app:musicCardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Use a normal Toolbar here -->
<xallosh.xproject.xmusic.search.ToolBar
android:id="#+id/mMainbar"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:visibility="visible">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/search_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:visibility="gone"
android:tint="?attr/iconColor"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_action_search"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="My Library"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Subhead"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
</xallosh.xproject.xmusic.search.ToolBar>
</RelativeLayout>
</xallosh.xproject.xmusic.views.MusicCardView>
I am trying to make a translucent search activity with variable height - wrap content on RecyclerView to be exact. Unfortunately, I am not able to fit screen height and end up with weird margin at the bottom, as seen on screenshot.
Here is my activity layout
<android.support.design.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="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:theme="#style/WeatherTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/AppBarStyle.Main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:logo="#null" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/suggestionsContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:visibility="gone" />
<TextView
android:id="#+id/emptyResults"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:padding="16dp"
android:text="#string/not_found"
android:textSize="22sp"
android:visibility="gone" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<ProgressBar
android:id="#+id/loading"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_gravity="center"
android:background="#color/white"
android:layout_margin="14dp"
android:visibility="gone" />
</FrameLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
And theme used for this activity is MainTheme.NoActionBar.Search
<style name="MainTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/theme_color_primary</item>
<item name="colorPrimaryDark">#color/theme_color_primary_dark</item>
<item name="colorAccent">#color/theme_color_accent</item>
<item name="colorControlHighlight">#color/theme_color_highlight</item>
<item name="android:textColorPrimary">#color/theme_text_color_primary</item>
<item name="android:windowBackground">#color/theme_color_background</item>
</style>
<style name="MainTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="MainTheme.NoActionBar.Search" >
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.5</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
</style>
Will appreciate any hints on what might cause the problem!
i need to do this :
http://developer.android.com/design/material/images/card_travel.png
so i create and add the dependency to the project and here is my activity main code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="6dp">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:src="#drawable/ic"/>
<TextView
style="#style/TextAppearance.AppCompat.Caption"
android:textColor="#555"
android:layout_margin="3dp"
android:gravity="end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Detail"/>
</android.support.v7.widget.CardView>
</LinearLayout>
so, how we can do this like below picture:?
http://i.stack.imgur.com/Z0lNa.png
Cheers!
What you're looking for is a translucent status bar. When you have this configured you're able achieve this effect. Make also sure to remove the actionbar as I do in my example down below, otherwise you'll have to make it transparent.
Change your v21/themes.xml file to this:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Then add android:fitsSystemWindows="true" to your LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/feed_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
Actually i am trying to do navigation drawer but i want it on status bar not below it i put all kind of code to make it transparent but still don't work
My xml layout is like
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:elevation="7dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/actionbar_color"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"></android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/content_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/drawer_Linearlayout"
android:layout_width="260dp"
android:layout_gravity="start|top"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="168dp"
android:scaleType="fitXY"
android:src="#drawable/navigation_img"
android:id="#+id/mytext"/>
<ListView
android:id="#+id/navdrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:layout_below="#+id/mytext"
android:layout_gravity="start|bottom"
android:background="#FFFFFF"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/list_selector"
android:paddingTop="5dp"></ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
My Theme is for v-21
<style name="AppThemes" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="colorPrimary">#color/actionbar_color</item>
<item name="colorPrimaryDark">#color/alert_normal</item>
<item name="colorAccent">#color/actionbar_color</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
When i remove LinearLayout and ImageView it work fine but
i want imageview inside DrawerLayout but actually it supports only 2 child elements so i have to use LinearLayout
Please suggest me way to do that way.
I got solution for such layout.
Sorry for posting late. I just have to make a little change in xml just like that.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar"></include>
<FrameLayout
android:id="#+id/content_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/drawer_Linearlayout"
android:layout_width="260dp"
android:layout_gravity="left|start"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="168dp"
android:scaleType="fitXY"
android:src="#drawable/navigation_img"
android:id="#+id/mytext" />
<ListView
android:id="#+id/navdrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:layout_below="#+id/mytext"
android:layout_gravity="start|bottom"
android:background="#FFFFFF"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/list_selector"
android:paddingTop="5dp"></ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
And also make your theme style for v-21 like that.
<!-- Base application theme. -->
<style name="AppThemes" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="colorPrimary">#color/actionbar_color</item>
<item name="android:textColor">#color/myNavigationColor</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="titleTextStyle">#style/ActionBarTitleText</item>
<item name="colorPrimaryDark">#color/actionbar_primary_color</item>
<item name="colorAccent">#color/actionbar_color</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverflow</item>
</style>
and normal theme style is like
<style name="AppThemes" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimaryDark">#color/actionbar_primary_color</item>
<item name="colorPrimary">#color/actionbar_color</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:textColor">#color/myNavigationColor</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverflow</item>
</style>
Hope if you get stuck in such situation, these will be the solution for you.
Try adding these lines to your android:id="#+id/drawer_Linearlayout"
The layout gravity should start from left to right, and make it fit by setting the android:fitsSystemWindowsattribute to true.
<LinearLayout
android:id="#+id/drawer_Linearlayout"
android:layout_width="260dp"
android:layout_gravity="left|start"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:orientation="vertical">