Add small button on the upper right of imageview - android

Currently i have this layout:
https://imgur.com/a/Y2a67
this is the code for this layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
</LinearLayout>
</FrameLayout>
</HorizontalScrollView>
What i'm trying to achieve is:
https://imgur.com/a/MYxkh
where i need to add additional 'X' button on the upper left side of the imageview


You can use FrameLayout. Your icon must have android:layout_gravity attribute.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/myImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/imgX"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|left" //This line
android:src="#mipmap/ic_launcher_round" />
</FrameLayout>
Hope it helps.


Try this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="80dp"
android:layout_height="108dp"
android:background="#ffffff">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:background="#e6e6e6" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/ic_cancel_black" />
Output:
Support multiple resolution:
Using this library: https://github.com/intuit/sdp
Create multiple layouts for each screen and using dp

Related

Placing Textview on ImageView Compatible on each screensize

I have 2 images and 4 textviews and I want to place textviews on images my current work is like that.
I have to place 4 textview like 2. Image. Is there any way to make it without using DP because if i use DP when resolution changed looks terrible.
My current work is:
I want it to look like this:
My Activity Codet
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="300dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/solayak"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Deneme"
android:gravity= "center"
/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/sagayak"
/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="70dp"
app:srcCompat="#drawable/arti_buton_yeni" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="70dp"
app:srcCompat="#drawable/eksibutton_yeni" />
</LinearLayout>
<include
layout="#layout/bottomnavigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
</RelativeLayout>

Unable to scroll linear layout inside a horizontal scrollview in android

I am adding few image views inside a horizontal LinearLayout which is again inside a HorizontalScrollView. But the linear layout is not scrolling. Below is my code. Can someone guide me where exactly my xml formation is going wrong?
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#drawable/default_ic" />
</LinearLayout>
</HorizontalScrollView>

I would suggest use Constraint Layout As Parent and Inside it Use Nested Scroll View With Linear Layout
Here is a sample code, modify according to your need.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="suraj.iitgandhinagar.Login">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:layout_editor_absoluteX="72dp"
tools:layout_editor_absoluteY="0dp"
tools:ignore="MissingConstraints">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="36dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="272dp"
android:layout_height="237dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:src="#drawable/unnamed"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="59dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

Take a look at this situation. if you use the linear layout as match_parent then don't get the layout width. Use wrap_content. If its don't work then set the fixed size for your image.
<HorizontalScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:layout_marginBottom="2dp"
android:fillViewport="true"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/lyt_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/iv_icon3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:layout_marginRight="1dp"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</HorizontalScrollView>

How to fit URL image into the screen on android?

i am getting image from url but its not fitting with the screen as its showing on browser...kindly help..i tried everything..this the url
"http://i.imgur.com/DvpvklR.png"
here is the image
if we run the url on browser, we can see tht on my device its slightly upside..i want it to look perfect on my device
here is my xml file:
<RelativeLayout 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7">
<ImageView
android:id="#+id/ms1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/main1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3">
<ImageView
android:id="#+id/ms2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:scaleType="fitXY"
android:src="#drawable/pl2" />
<ImageView
android:id="#+id/ms3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:scaleType="fitXY"
android:src="#drawable/l1" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Add this to your Imageview ,
android:adjustViewBounds="true"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"

You can use a library known as glide for this purpose

See if it works.
<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="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ms1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/main1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/ms2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:scaleType="fitXY"
android:src="#drawable/pl2"/>
<ImageView
android:id="#+id/ms3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:scaleType="fitXY"
android:src="#drawable/l1"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

how can make my xml images fit for all devices?

I'm new to designing of android, So I want my main screen images fit to all devices i want this MainScreen page fit to be in all devices. It has 3 images I have given weight but nothing seems to work if I test it on tab. Its not looking the way I want, here is the image
here is my XML .I know I should not give dp for height but how to make it look like that without giving sizes.
<RelativeLayout 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"
tools:context="com.example.zeba.broccoli.MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="50dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1">
<ImageView
android:id="#+id/ms1"
android:layout_width="match_parent"
android:layout_height="374dp"
android:layout_weight="7"
android:scaleType="fitXY"
android:src="#drawable/avatar" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<ImageView
android:id="#+id/ms2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/ee"
android:layout_weight=".5" />
<ImageView
android:id="#+id/ms3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/dd"
android:layout_weight=".5" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Use this code:
<RelativeLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7">
<ImageView
android:id="#+id/ms1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3">
<ImageView
android:id="#+id/ms2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/ms3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Hope this will help you

See following xml solution to get what you need.
You always can change relative width and height of the each view element by playing layout_weight parameter. Its like give width/height in percents :
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#android:drawable/btn_default"
android:scaleType="fitXY"
android:layout_weight="70"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="30">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#android:drawable/btn_default"
android:scaleType="fitXY"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#android:drawable/btn_default"
android:scaleType="fitXY"
android:layout_weight="1"/>
</LinearLayout>

Android: Position Widget in the center

I am trying to learn about Animation and am using following layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:padding="16dp">
<ImageButton
android:id="#+id/thumb_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:background="#null"
android:contentDescription="#string/description_image_1" />
</LinearLayout>
</FrameLayout>
However, this will not center the ImageButton vertically. It does it only horizontally. I tried layout_gravity "center", "center_vertical", "center_horizontal" without success. The best I got is this:
but I need to get this:
Much appreciated

Try android:gravity="center" to your LinearLayout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:padding="16dp"
android:gravity="center">
<ImageButton
android:id="#+id/thumb_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:background="#null"
android:contentDescription="#string/description_image_1" />
</LinearLayout>
difference between gravity and layout_gravity

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:padding="16dp">
<ImageButton
android:id="#+id/thumb_button_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:background="#null"
android:contentDescription="#string/description_image_1" />
</LinearLayout>
There is problem in wrap_content in layout height and width in your imagebutton widget

Categories

Resources