I want to set three image for create image tab.I set three image in activity_main.xml file.But it ok for only screen 5.0 inches.If over this,image is very small.How can I do that?Please help me kindly.
this is activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:context=".SettingActivity"
android:baselineAligned="false">
<Button
android:id="#+id/imageButtonHomeSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_home_config"
android:onClick="imageButtonHomeSelector"
/>
<Button
android:id="#+id/imageButtonLoginSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_login_config"
android:onClick="imageButtonLoginSelector"
/>
<Button
android:id="#+id/imageButtonSettingSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/setting_button_hover"
android:onClick="imageButtonSettingSelector"
/>
</LinearLayout>
I can suggest two ways:
1) Use mipmap based images for all the 5 screen sizes (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi). And rather than
<Button
android:id="#+id/imageButtonLoginSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_login_config"
android:onClick="imageButtonLoginSelector"/>
try this:
<Button
android:id="#+id/imageButtonLoginSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/icon_login_config"
android:onClick="imageButtonLoginSelector"/>
which in-turn uses the respective image automatically based on screen size.
2) Use Vector Drawables as per this reference
Related
I used containers to build layouts which worked well everywhere, and here on the statistics where there is a pie chart, everything is floated.
If it is not the reason that it increases over time, and if so how to fix it ?
Here is an XML code. Please help or give any useful information on how to fix it.
<?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="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="#drawable/statisricfon" />
<LinearLayout
android:id="#+id/layout_for_stat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="vertical">
<TextView
android:id="#+id/numpoint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="85dp"
android:layout_marginRight="370dp"
android:text="120" />
<TextView
android:id="#+id/numtry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-20dp"
android:layout_marginRight="235dp"
android:text="5" />
<TextView
android:id="#+id/numanswear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp"
android:layout_marginRight="80dp"
android:text="18" />
<TextView
android:id="#+id/numtruavt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="190dp"
android:layout_marginRight="620dp"
android:text="23" />
<TextView
android:id="#+id/numtopscore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-20dp"
android:layout_marginRight="425dp"
android:text="15" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/piecha"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="70dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="50dp"
></com.github.mikephil.charting.charts.PieChart>
</LinearLayout>
</RelativeLayout>
Screenshot :
I can see a few red flags in the way you decided to implement this layout.
First a bit context, there are endless variations of Android devices out there, with different physical screen sizes, resolutions, and subsequently dpis.
Ideally, you would move away from RelativeLayout and use ConstraintLayout instead. And if the PieChart width and height can change over time so the view itself has to manage that in its onMeasure method regardless.
It would also make sense to get rid of #drawable/statisricfon and replace it with a few Android XML drawables and vector images. This will ensure that the design would scale well on different screen configurations including portrait, landscape, and multi-window modes.
You can use one drawable for the gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="integer"
android:centerColor="integer"
android:endColor="color"
android:startColor="color"
android:gradientRadius="integer"
android:type=["linear" | "radial" | "sweep"] />
</shape>
And for the question marks, you can use a repeated pattern instead:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/pattern"
android:tileMode="repeat" />
And lastly, custom views for the TextViews with that white box background and title.
everyone, first of all, I'm with a problem in my android project. I set an image as a layout background with the appropriate width (5.5), and when I run the application it appears white background instead of the intended image. The image is in at the drawable folder, all normal.
The image has the same dimensions of the layout (5.5)
Code:
<?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"
android:animateLayoutChanges="true"
android:background="#drawable/fundo"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="200dp"
app:srcCompat="#drawable/logo_branco" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="450dp"
android:fontFamily="#font/advent_pro_thin"
android:text="O automóvel ideal para si!"
android:textColor="#E76C00"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
If you want to load a whole image, I'd use the approach of having an ImageView at the root ViewGroup of the layout with both dimensions set to match_parent.
This will solve the issue of the image not loading with an added benefit of being able to define scale type (like centerCrop) which enables you to have a picture with any side ratio and be sure it'll fill the screen both vertically and horizontally.
Edit:
Proposed solution:
<?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"
android:animateLayoutChanges="true"
tools:context=".MainActivity">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/fundo" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="200dp"
app:srcCompat="#drawable/logo_branco" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="450dp"
android:fontFamily="#font/advent_pro_thin"
android:text="O automóvel ideal para si!"
android:textColor="#E76C00"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
I tried to create an actionBar like this one, "this is a website template "
so I created a file action_bar.xml which I'll inflate, A RelativeLayout which has a height of wrap_content & a width of match_parent , it has the gear icon and all other details except that I can't get a part of the round picture outside of the RelativeLayout like the picture.
I tried using margins but it doesn't get out of the RelativeLayout, The RelativeLayout gets extended instead. so, More margin in the picture results in more height in RelativeLayout.
Any suggestions?
<?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="wrap_content">
<ImageButton android:src="#drawable/roundPicture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/gearICON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
No Libraries please, I'm not making an app, I'm just trying to understand.
quick recap. I want a part of the first ImageButton outside of the RelativeLayout
Check if it is this what you are looking for
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ImageButton
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>
First, I ran into a problem that my data appears under the ImageView, not behind it
but I fixed it by adding my data which is a listview, after the relativeLayout in the frameLayout, Thanks P.Juni for the idea btw
The XML which runs totally fine is
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<ImageButton android:id="#+id/imageButton"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="60sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>
My current layout looks the following:
MY XML layout looks like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" >
<TextView
android:id="#+id/tvLetter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="3"
android:text=""
android:gravity="center"
android:textSize="#dimen/letter_size"
android:textColor="#FFFFFF"
android:background="#drawable/bd" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="1" >
<Button
android:id="#+id/colorButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:background ="#drawable/colors"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/soundButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:background="#drawable/sound" />
<Button
android:id="#+id/eraserButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/eraser" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="2" >
<ImageView
android:id="#+id/ivIcon"
android:layout_width="#dimen/letter_icon"
android:layout_height="#dimen/letter_icon"
android:scaleType="fitXY"
android:layout_alignParentLeft="true"
android:background="#drawable/zebra" />
<LinearLayout
android:id="#+id/actionHolder"
android:layout_toRightOf="#+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/wordSound"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:background="#drawable/sound" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
My #dimen/letter_icon is being used for different sizes based on the screen size. I am trying to make it compatible with both phone and tablet (different size screen). How do I achieve the following in my layout:
Let's say the ZEBRA text is inside a textview and the sound is in a button.
I am thinking the bottom ImageView has to be inside another layout, linearleayout maybe? and take up 3/4 of the space of the screen width.
Put your ZEBRA and SPEAKER buttons in vertical LinearLayout. Set buttons' height to match_parent and layout_weight to 1 and you should have what you want
and if you want to distribute width among your buttons' container and ImageView, set them width to match_parent and play with layout_weight there.
I'm working with a package some fellow members found for me that allows a slider to start at the top and slide to the bottom. I need to add content behind the slider, but I'm unsure of where to put it in the XML. Maybe I have to add a linear layout, but I'm not sure. I just need to add one button that sits in the very center of the screen. I think it needs to be put in the following code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:ns="http://schemas.android.com/apk/res/it.sephiroth.demo.slider">
<Button
android:id="#+id/button_open"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/open"
android:layout_centerInParent="true"
android:visibility="gone" />
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:id="#+id/drawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
ns:content="#+id/content"
ns:direction="topToBottom"
ns:handle="#+id/handle" >
<include
android:id="#id/content"
layout="#layout/pen_content" />
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="40px"
android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
</RelativeLayout>
I'd also like for the button to be behind the drawer.
Any help would be great!
Try This:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:ns="http://schemas.android.com/apk/res/it.sephiroth.demo.slider">
<LinerLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button_open"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/open"
android:layout_centerInParent="true"
android:visibility="gone" />
</LinerLayout