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>
Related
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>
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
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>
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
I have some Image Button on AbsoluteLayout, because they need to be placed on some parts on the ImageView.
I want that when I change the screen size resolution, the Image Buttons will stay at the exactly location on the ImageView.
The problem is that if I change the resolution, all the Image Buttons are moving from their places.
Maybe there is a way to place the Image Button without AbsoluteLayout on base of
ratio or percentage from the ImageView, because I know that AbsoluteLayout is not recommanded at all.
Thank you for the help
This is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".G" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/ScrollView1"
android:orientation="horizontal"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="15"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/ScrollView1"
android:orientation="vertical"
android:weightSum="100" >
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_weight="20"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/ScrollView1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/tvOn"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/t" />
<ImageButton
android:id="#+id/bon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="319dp"
android:layout_y="88dp"
android:src="#drawable/b_blue" />
<ImageButton
android:id="#+id/bo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="287dp"
android:layout_y="125dp"
android:src="#drawable/b_blue" />
</AbsoluteLayout>
<TextView
android:id="#+id/tvOn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_weight="80" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="85"
android:scrollbars="vertical" >
<LinearLayout
android:id="#+id/rGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical" >
<ToggleButton
android:id="#+id/bmD"
android:layout_width="match_parent"
android:layout_height="60dp" />
<ToggleButton
android:id="#+id/bmCt"
android:layout_width="match_parent"
android:layout_height="60dp"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
</RelativeLayout>