How to create Layout Topside ribbon on android app - java

I want to create a layout with ribbon for my android app layout but the ribbon goes behind the image immediately it fetches data / image from server. this is my layout
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_medium"
android:clipToPadding="false"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="#dimen/card_radius"
app:cardElevation="#dimen/card_elevation"
app:cardUseCompatPadding="false">
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/lyt_parent"
style="#style/RippleStyleBlack"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/grey_40">
<ImageView
android:layout_width="#dimen/product_item_img"
android:layout_height="#dimen/product_item_img"
android:src="#drawable/loading_placeholder"
android:tint="#color/grey_60" />
<ImageView
android:text="RED"
android:id="#+id/down_ribbon"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right|top"
android:src="#drawable/ic_top_ad_right"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_height="150dp"
android:scaleType="centerCrop" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#color/grey_5" />
</LinearLayout>
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>
The first imageView above is the background The second Imageview is the ribbon and the third imageView is for the image gotten from the server.
My Question is how will i make image Ribbon come in front of the image after and before it fetches it from the server. Thanks


THe problem is that the ribbon imageView should come last since all of them are at the same RelativeLayout see the correct code below
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_medium"
android:clipToPadding="false"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="#dimen/card_radius"
app:cardElevation="#dimen/card_elevation"
app:cardUseCompatPadding="false">
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/lyt_parent"
style="#style/RippleStyleBlack"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/grey_40">
<ImageView
android:layout_width="#dimen/product_item_img"
android:layout_height="#dimen/product_item_img"
android:src="#drawable/loading_placeholder"
android:tint="#color/grey_60" />
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_height="150dp"
android:scaleType="centerCrop" />
<ImageView
android:text="RED"
android:id="#+id/down_ribbon"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right|top"
android:src="#drawable/ic_top_ad_right"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#color/grey_5" />
</LinearLayout>
</com.balysv.materialripple.MaterialRippleLayout>
</android.support.v7.widget.CardView>

Related

XML markup in the Android application

How do I distribute the objects so that the TextView is perfectly in the middle of the parent object, and the ImageButton is on the left. Tried to install for the parent element
android:gravity="center"
, as well as for the TextView itself
android:layout_gravity="center"
, but nothing comes out. I attach the code below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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=".add">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="67dp"
android:orientation="horizontal"
android:gravity="center">
<ImageButton
android:id="#+id/backArrow"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:background="#color/transparent"
android:src="#drawable/back_arrow" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/tenor_sans"
android:text="#string/adder"
android:textColor="#2C1E4D"
android:textSize="24sp" />
</LinearLayout>
</RelativeLayout>

Does this help you with your requirement
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".add">
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="67dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/backArrow"
android:layout_width="30dp"
android:layout_height="match_parent"
android:background="#color/colorBlack"
android:scaleType="fitCenter"
android:src="#drawable/back_arrow" />
<TextView
android:layout_gravity="center|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/aclonica"
android:text="#string/adder"
android:textColor="#2C1E4D"
android:textSize="24sp" />
</LinearLayout>
</RelativeLayout>

how can get red of empty space inside CardView?

Dear Android Developers I am a creating cv Android app but there are empty after TextView inside CardView how can I get rid of that space
below my xml code where I have implemented CardView as parent child as LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="0dp"
card_view:cardPreventCornerOverlap="true"
card_view:cardUseCompatPadding="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:scaleType="centerCrop" />
<Space
android:layout_width="50dp"
android:layout_height="20dp" />
<TextView
android:id="#+id/about"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginRight="250dp"
android:gravity="center"
android:text="#string/about_me"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/introduction"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:gravity="start" />
</LinearLayout>
</android.support.v7.widget.CardView>

Change layout height of card view to match_parent

reduce marginTop of your text View remove the Space tag also and also reduce margin of your imageView

use this attributes in your cardview you can see the difference
your card do not have elevation and radius and that card view merge to the activity that's why it showing like a space after text use this in your card view:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp">
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="6dp"
android:elevation="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation = "vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/about"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginRight="250dp"
android:gravity="center"
android:text="#string/about_me"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/introduction"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:gravity="start" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

Scroll View does not work on OS 4.1.2

I have added scroll view in a layout, scroll view has attributes of match parent for height and width also fillViewPort is true for scroll view, its working in other devices but not working in android OS 4.1.2.
Layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:background="#android:color/white"
android:layout_height="match_parent">
<!-- <RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!– <ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.5"
android:scaleType="fitXY"
android:src="#drawable/page"/>–>
</RelativeLayout>-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="8">
<TextView
android:id="#+id/main_welcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/dimen_20dp"
android:text="#string/welcome"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<GridView
android:id="#+id/gridviewMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="#dimen/dimen_40dp"
android:layout_marginLeft="#dimen/dimen_40dp"
android:layout_marginRight="#dimen/dimen_40dp"
android:columnWidth="80dp"
android:horizontalSpacing="#dimen/dimen_10dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"></GridView>
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/textView20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerInParent="false"
android:text="For Any Queries Related To Mobile App Click On Service Request"
android:textAlignment="center" />
</RelativeLayout>
What can be the reason for this? All other scroll views are working in same device just not working on this screen.
Please help.Thank you..

Try Using nestedScrollView instead
<nestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="8">
<TextView
android:id="#+id/main_welcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/dimen_20dp"
android:text="#string/welcome"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<GridView
android:id="#+id/gridviewMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="#dimen/dimen_40dp"
android:layout_marginLeft="#dimen/dimen_40dp"
android:layout_marginRight="#dimen/dimen_40dp"
android:columnWidth="80dp"
android:horizontalSpacing="#dimen/dimen_10dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"></GridView>
</LinearLayout>
</nestedScrollView>

How to make imageView cross over out of layout?

Haii.... i need help to design my imageView from this screen shoot to be like this i need the imageView crossed from layout, i am using some of library in this activity like SlidingUpPanel and imageview from CircleImageView if i want to search in google what the keyword or anyone can give me any solution?
here is my layout.xml :
<?xml version="1.0" encoding="utf-8"?>
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="100dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoShadowHeight="20dp"
sothree:umanoDragView="#+id/dragView"
tools:context="com.idiots_international.jajan.activities.nearby.NearbyActivity"
sothree:umanoOverlay="true">
<LinearLayout
android:id="#+id/email_login_form"
android:layout_width="match_parent"
android:layout_gravity="top"
android:layout_height="wrap_content"
android:orientation="vertical">
<fragment 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:id="#+id/map"
tools:context="com.idiots_international.jajan.activities.nearby.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment"/>
</LinearLayout>
<!--map/top view-->
<RelativeLayout android:id="#+id/nearbyRelLayout1" android:layout_width="match_parent" android:layout_height="wrap_content">
<!---->
<LinearLayout android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center"
android:src="#drawable/jajan_logo_3"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
<TextView
android:id="#+id/ShowAddressTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Click on Marker to view Address "
android:textColor="#000"
android:textSize="15dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"/>
<ScrollView android:layout_width="match_parent" android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</android.support.v7.widget.RecyclerView>
</ScrollView>
</LinearLayout>
<include layout="#layout/layout_bottom_navigation"/>
</RelativeLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
Working but need to remove the outline in here :

Try this,
<!--map/top view-->
<RelativeLayout
android:background="#android:color/transparent"
android:id="#+id/nearbyRelLayout1" android:layout_width="match_parent" android:layout_height="wrap_content">
<!---->
<LinearLayout
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/ShowAddressTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Click on Marker to view Address "
android:textColor="#000"
android:textSize="15dp"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"/>
<ScrollView android:layout_width="match_parent" android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</android.support.v7.widget.RecyclerView>
</ScrollView>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:src="#drawable/jajan_logo_3"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
</RelativeLayout>

Don't use white background for the parent of Circle image view, this will not let see background map.
You can implement this with following layout idea. Feel free to ask if you cant reach requirement
<?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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
// margin top half of circle image view height
android:layout_marginTop="40dp"
>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>

Try this way:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:background="#643122"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!--Your Top view (the map) goes here-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!--Your Bottom view (the text) goes here-->
</LinearLayout>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center"
android:src="#drawable/bg"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
</FrameLayout>
OUTPUT IMAGE

TextView above Image view in a layout

I am using this layout for my screen:
<?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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_gravity="top|center" android:layout_marginTop="-10dp"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
android:layout_gravity="top|center"/>
</LinearLayout>
and i want to add a TextView to the screen that will be above the imageView2.
and when i add it to the xml it show it under the image.
what i need to do to be able to put TextView on image.

Try this:
<?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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_marginTop="-10dp"/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>

You could add another LinearLayout where the second image is, for example:
<?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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_gravity="top|center" android:layout_marginTop="-10dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Goes Here" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
android:layout_gravity="top|center"/>
</LinearLayout>
</LinearLayout>

Here is an alternative,
in your xml file,
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:layout_centerInParent="true"
android:layout_above="idofyourImage"
/>
Hope it helps

Categories

Resources