I want to make my layout below like in the image I have added at the end. I am able to rotate and add a picture as in the image, but the problem is that the line is going out of the border.
So, how can I perfectly make that lie within border?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/cover_pic_background"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#736f6f"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/star"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Certified"
android:layout_gravity="center"
android:textSize="30sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/star"
/>
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageViewId_CoverPic"
android:scaleType="centerInside"
android:padding="3dp"
/>
<ImageView
android:id="#+id/inside_imageview"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_marginStart="39dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:scaleType="centerInside"
android:background="#drawable/cover_pic_background"
android:elevation="5dp"
/>
</RelativeLayout>
Try this
<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="250dp"
android:layout_margin="10dp">
<ImageView
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#color/colorAccent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="250dp"
android:layout_height="150dp"
android:layout_alignBottom="#+id/nilu"
android:layout_alignParentStart="true"
android:src="#mipmap/ic_launcher_round" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/imageView"
android:layout_alignTop="#+id/imageView"
android:layout_marginLeft="-70dp"
android:background="#color/colorPrimary"
android:padding="10dp"
android:paddingStart="50dp"
android:rotation="-50"
android:layout_marginTop="-10dp"
android:text="certified profile"
android:textColor="#ffffff" />
</RelativeLayout>
OUTPUT
Make transparent image with this design. And put it over profile pic.
Related
I have recyclerView.
<androidx.recyclerview.widget.RecyclerView
android:visibility="visible"
android:id="#+id/photoRecyclerView"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="20dp"
android:orientation="horizontal"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
And It makes each item with image_card.xml
image_card has this layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/imageLayout"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp">
<ImageView
android:background="#drawable/mindbox_bold"
android:clipToOutline="true"
android:id="#+id/imageCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside" />
<ImageView
android:id="#+id/removeButton"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="-5dp"
android:layout_marginRight="-5dp"
android:background="#drawable/ic_cross_circle" />
</RelativeLayout>
I want id removeButton goes on top overflowing id imageCard with marginTop and marginRight -5dp each.
But This shows result like below.
As you can see, removeButton is cut.
I want to make something like below in RecyclerView.
What should I change?
Try this once
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/imageLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/transparent"
android:clipToOutline="true"
android:gravity="center"
android:paddingTop="25dp"
android:paddingBottom="25dp"
android:scaleType="fitXY"
android:src="#drawable/mindbox_bold"
tools:ignore="UnusedAttribute" />
<ImageView
android:id="#+id/removeButton"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="top|end"
android:adjustViewBounds="true"
android:src="#drawable/ic_cross_circle" />
</FrameLayout>
I have a bottom layout with three images. I want them to be equally distributed. To do this, I used the layout_weight xml property. But the visual representation of them is awful – the images are all stretched out
The images' dimension is 32*32.
The layout code for this particular toolbar is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar_bottom"
xmlns:appo="http://schemas.android.com/apk/res-auto"
android:minHeight="50dp"
android:background="#ffff8c0e"
appo:theme="#style/ToolbarTheme"
android:minWidth="50dp"
android:elevation="10dp"
>
<LinearLayout
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:id="#+id/camera_image"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/camera_icon"
/>
<ImageView
android:id="#+id/news_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="fitXY"
android:layout_weight = "1"
android:src="#drawable/new_icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:id="#+id/facebook_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image"
/>
</LinearLayout>
How can I make them appear properly?
wrap ImageView in another layout say RelativeLayout.
i.e do something like this.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:appo="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffff8c0e"
android:elevation="10dp"
android:minHeight="50dp"
android:minWidth="50dp"
appo:theme="#style/ToolbarTheme" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/camera_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/camera_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/new_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/facebook_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this will help.
Remove android:scaleType="fitXY" from your code.Because All it does is scale the bitmap up to the size of the ImageView.
Refer this.
<LinearLayout
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/camera_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/news_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/facebook_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
Just use RelativeLayout like this:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/camera_image"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/camera_icon"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:clickable="true"
android:src="#drawable/new_icon"
android:scaleType="fitXY"/>
<ImageView
android:id="#+id/facebook_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image"/></RelativeLayout>
There is this nice library that solves by problem:). It uses bottom navigation.
set your imageview scale type as you want, there are different options
android:scaleType="fitXY"
or
center, centerCrop,centerInside,fitCenter etc
Hi I am working on an app which has this design. By using a lot of effort i developed this. But this is still not the same as given design and on other screens I got this. This is the code in xml file. Any help willbe greatly appreciated.
<?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"
android:background="#mipmap/dashboard_bg"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#mipmap/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#mipmap/logo" />
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Welcome text of app" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#mipmap/seperator" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_above="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#mipmap/regional_managers" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView3"
android:layout_toEndOf="#+id/imageView1"
android:layout_toRightOf="#+id/imageView1"
android:contentDescription="#null"
android:src="#mipmap/regions" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/imageView3"
android:layout_alignEnd="#+id/imageView3"
android:layout_below="#+id/imageView4"
android:contentDescription="#null"
android:src="#mipmap/graphs" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_alignTop="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView1"
android:layout_toStartOf="#+id/imageView1"
android:contentDescription="#null"
android:src="#mipmap/nationwide" />
</RelativeLayout>
</LinearLayout>
Also tried links from so like
image size (drawable-hdpi/ldpi/mdpi/xhdpi)
and Setting drawable folder to use for different resolutions but unable to get desired results. Any help willbe greatly appreciated.
Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout 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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
app:layout_marginTopPercent="10%"
app:layout_widthPercent="30%" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginLeftPercent="20%"
app:layout_marginTopPercent="40%"
app:layout_widthPercent="20%" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginLeftPercent="60%"
app:layout_marginTopPercent="55%"
app:layout_widthPercent="20%" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginLeftPercent="30%"
app:layout_marginTopPercent="70%"
app:layout_widthPercent="20%" />
</android.support.percent.PercentRelativeLayout>
I have three icon the a RelativeLayout, how to make them distributed to screen width?
Since I may add more icon to this line programmatically, I cannot hard code a fixed margin to these icon.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/icon1"
android:src="#mipmap/icon" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/icon2"
android:layout_toRightOf="#id/icon1"
android:layout_alignBottom="#id/icon1"
android:src="#mipmap/icon" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/icon3"
android:layout_toRightOf="#id/icon2"
android:layout_alignBottom="#id/icon2"
android:src="#mipmap/icon" />
</RelativeLayout>
Please use LinearLayout
and use this code, which will work in all resolutions device.
<?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:gravity="center_horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<ImageView
android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/icon1"
android:layout_toRightOf="#id/icon1"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/icon3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/icon2"
android:layout_toRightOf="#id/icon2"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
Your code with small modification in attributes.
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/icon1"
android:src="#mipmap/icon" />
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/icon2"
android:layout_below="#id/icon1"
android:layout_alignParentBottom="#id/icon1"
android:src="#mipmap/icon" />
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/icon3"
android:layout_below="#id/icon2"
android:layout_alignParentBottom="#id/icon2"
android:src="#mipmap/icon" />
</RelativeLayout>
I have two image in layout .I want to show second image in bottom edge curve of first image .Can anybody tell how to do like overlay image
Thanks
Use FrameLayout :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageView
android:id="#+id/imgSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:src="#drawable/ic_launcher"/>
</FrameLayout>
Use a RelativeLayout, simple put the second ImageView below the first ImageView. Then what you have to do is to set the marginTop attribute of the second image to a negative value, and this value is the overlaying size, like this android:layout_marginTop="-1dp".
A sample code right below:
<?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"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/firstImage"
android:src="#drawable/myimage1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="-1dp"
android:layout_height="wrap_content"
android:id="#+id/secondImage"
android:layout_below="#+id/firstImage"
android:src="#drawable/myimage2"
/>
</RelativeLayout>
You can do it without Frames, only using RelativeLayout, if you make use of the alignParentalXXX tags as in the following example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#E4E3CE"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="75">
<ImageView
android:id="#+id/backgroundImageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#ffffff" />
<ImageView
android:id="#+id/imageView"
android:layout_width="66dp"
android:layout_height="66dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:background="#40000000"
android:gravity="center_vertical"
android:paddingHorizontal="3dp"
android:paddingVertical="1dp"
android:text="Header Text"
android:textColor="#ffffff"
android:textSize="16dp" />
</RelativeLayout>
</LinearLayout>
You can see how this layout looks like in the following image:
Use Frame Layout like sample below :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#android:color/black"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/ic_drawer"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="14dp"
android:src="#drawable/menu" />
<ImageView
android:id="#+id/ic_drawer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/textView1_detail"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:src="#drawable/ic_drawer" />
<TextView
android:id="#+id/textView1_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/imageView1"
android:text="Reports"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/overlay_favorite"
android:layout_width="215dp"
android:layout_height="134dp"
android:layout_gravity="right"
android:background="#drawable/overlay_favorite"
android:visibility="gone" />
</FrameLayout>
</LinearLayout>