Android layout collapse - java

I use a XWalkView to load webpage and a IjkVideoView to play live video in my app. I want the IjkVideoView playing the video in front the XwalkView, so I put these two view in a relativelayout and IijVideoView behind the XWalkView.
In the android studio's Component Tree of Design window the layout seems ok as below image,
While when I run the app in my device, the layout is in mess as below image. You can see the background of IjkVieoView is in front of XWalkView, but the video playing in the IjkVideoView is behind the XWalkView, as the upper part of the video has been covered by the XWalkView.
layout xml,
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="UselessParent">
<!-- This could be your fragment container, or something -->
<org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/xWalkView"
android:layout_width="fill_parent"
android:layout_height="160dp"
android:background="#color/blue"
android:isScrollContainer="true">
</org.xwalk.core.XWalkView>
<com.xxxxxx.app.widget.media.IjkVideoView
android:id="#+id/video_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="72dp"
android:background="#color/colorAccent" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_tabXmlResource="#xml/web_tabs" />
</RelativeLayout>
</LinearLayout>
activity java code,
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Log.d("INFO", "entered");
setContentView(R.layout.activity_web);
mXWalkView = (XWalkView) findViewById(R.id.xWalkView);
XWalkSettings webSettings = mXWalkView.getSettings();
webSettings.setJavaScriptEnabled(true);
mXWalkView.addJavascriptInterface(new JsInterface(), "NativeInterface");
videoView = (IjkVideoView) findViewById(R.id.video_view);
videoView.setAspectRatio(IRenderView.AR_ASPECT_FILL_PARENT);
videoView.setVideoURI(Uri.parse("http://live.xxxxxx.com/live/40xx27.flv"));
videoView.start();
final Bundle extras = getIntent().getExtras();
mXWalkView.load("http://xxxxxxxxxxxxxx", null);
}

Your layout seems to be correct. It might be broken from the libs. It already has 1k+ issues.
Maybe you can use a custom dialog that has the video in it and show that dialog. This way the video will be in front of the images. Then you can try to remove the shadow or bgColor = transparent, so that the user might not realise that is a dialog. This hack may work.

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="UselessParent">
<!-- This could be your fragment container, or something -->
<org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/xWalkView"
android:layout_width="fill_parent"
android:layout_height="160dp"
android:background="#color/blue"
android:elevation="5dp"
android:isScrollContainer="true">
</org.xwalk.core.XWalkView>
<com.xxxxxx.app.widget.media.IjkVideoView
android:id="#+id/video_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:elevation="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="72dp"
android:background="#color/colorAccent" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:elevation="5dp"
android:layout_alignParentBottom="true"
app:bb_tabXmlResource="#xml/web_tabs" />
</RelativeLayout>
</LinearLayout>
Try this layout i modify it with elevation may it will help you.I have same problem by using elevation it solve.

I think it is due to relative layout. Why don't you try this code by using the Frame Layout. The most convenient and maintainable way to design application user interfaces is by creating XML layout resources. This method greatly simplifies the User Interface design process, moving much of the static creation and layout of user interface controls and definition of control attributes, to the XML, instead of littering the code.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<org.xwalk.core.XWalkView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/xWalkView"
android:layout_width="fill_parent"
android:layout_height="160dp"
android:background="#color/blue"
android:isScrollContainer="true">
</org.xwalk.core.XWalkView>
<com.xxxxxx.app.widget.media.IjkVideoView
android:id="#+id/video_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="72dp"
android:layout_gravity="Bottom"
android:gravity="center"
android:background="#color/colorAccent" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_tabXmlResource="#xml/web_tabs" />
</FrameLayout>
</LinearLayout>

Related

My drag & drop is not working in Android Studio

As you can see on the upper image, there are align options "to RightOf=button", "below=button" when you drag something, but when I drag something nothing like that is shown. Can anyone help me fix that?
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/text_witaj_uzytkowniku"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/witaj_uzytkowniku" />
</RelativeLayout>
Honestly, I prefer to use ConstraintLayout as the root. I believe it is much easier to use with the drag and drop tool.
When using it make sure that all objects are connected to each other(or the parent) at least once vertically and once horizontally.
How this looks in the code:
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can also adjust the distances using the side panel.
To use the layout you just need to type Constraint layout in the Pallete and drag it (if it is not installed, there will be a download)
Set position of your textview then try to add another view by dragging
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/text_witaj_uzytkowniku"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop ="true"
android:layout_alignParentLeft="true"
android:text="#string/witaj_uzytkowniku" />
</RelativeLayout>
I think instead of Relativelayout, you should use the CoordinatorLayout.
And if you continue with Relativelayout then go to file invalidate and restart your Android studio if this is cache related issue then resolved it.
Use Coordinator Layout to work. RelativeLayout is more of coding layout..

ANDROID STUDIO- layout background (image) doesn't show

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>

Android LinearLayout, set background to Transparent

I am inflating a bottom_sheet_layout. It contains a LinearLayout as the root element. It has one child CardView.
I've tried the following:
setting `android:background` property to
1. #00FFFFFF
2. #00000000
3. #android:color/transparent
setting the background color of LinearLayout programatically
`LinearLayout l = container.findViewById(R.id.root_element);
l.setBackgroundColor(Color.TRANSPARENT);`
This is the BottomSheet.Class that is linked to the bottom_sheet_layout
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.bottom_sheet_layout, container, false);
LinearLayout l = container.findViewById(R.id.root_element);
l.setBackgroundColor(Color.TRANSPARENT);
return v;
}
This is the full bottom_sheet_layout
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
android:id="#+id/root_element"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="16dp">
<!-- A CardView that contains a TextView -->
<androidx.cardview.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/poiName"
android:fontFamily="#font/comfortaa_bold"
android:text="#string/poiName"
android:textSize="20sp"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"/>
<!--Location-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:fontFamily="#font/work_sans_medium"
android:text="#string/ui_location"
android:textFontWeight="800" />
<TextView
android:id="#+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="10dp"
android:fontFamily="#font/work_sans"
android:text="#string/ui_location_addr" />
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/share"
android:scaleType="center"
card_view:backgroundTint="#color/colorPrimary" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
This is the Map Fragment. Here is where I inflate the bottom_sheet_layout
<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapsActivity" />
Following several guides, I still could not get the #00FFFFFF method to work. Programmatically setting the color to transparent, crashes the application.
It seems that in earlier questions on StackOverflow, setting the background to the hex code with alpha value used to work. Now I only get a dim gray background.
Screenshots of the application
Image Layout
App ScreenShot
If you are not using MapView, I supposed that you are inflating the Google Map + bottom_sheet_layout in the same fragment. If Yes, I think that your issue is not the LinearLayout transparency but you are inserting bottom_sheet_layout to the bottom of the fragment container, not over the map.
You can use this layout for your Map fragment
(androidx, but very similar if you are using android)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- use this fragment for your google map -->
<fragment
android:id="#+id/google_map"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<!-- use this fragment for your bottom_sheet class -->
<fragment
android:id="#+id/bottom_sheet"
android:layout_margin="16dp" // with this you do not need the LinearLayout root_element
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Then, you can play with your CardView (or LinearLayout) visibility to show the card or not.
Other layouts are possible like using directly the card view instead of a Fragment.
I think I can help you with some sort of solutions, which you can also try and see if that works or not.
Make use of alpha property in your .java file
Range the value as per your ease
LinearLayout l = container.findViewById(R.id.root_element);
l.setAlpha(0.4);
You can make use of alpha in your XML file too:
<LinearLayout
android:id="#+id/l1"
android:alpha="0.5"
android:layout_width="190dp"
android:layout_height="match_parent">
0.0 is for fully transparent and 1.0 is for fully opaque.
Let me know if any of the solutions work for you. However, do more research here, you will definitely get a solution. Happy coding.
Try background null.
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#null">
......
</LinearLayout>
Are you sure that the child layout elements doesn't have backgrounds?

Android - what kind of view/xml I've to study

Problem I want view-layout like the following photo, on top I want image view, in the middle a text view and bottom list of items. All this I want to be scrollable (black arrow in the picture). in this way, the user for first see image-text-and part of list items, if scroll down, see the list of item.
For the bottom I thought to use listView, but in this way I think I'll have 2 scrollable view (???) and then I want to make the list in 2 columns, and I don't know if it is possible with ListView
Question
I didn't write code, because I want to know what kind of view or somethings else I've to study.
I sketchy something like this, but the result is really horrible
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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">
<RelativeLayout
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
app:srcCompat="#drawable/nope"
android:id="#+id/imageView4"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<View
android:id="#+id/centerShim5"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:visibility="invisible" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/textView2"
android:textColor="#color/ame_default_cluster_circle_color_medium"
android:textSize="26dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</ScrollView>
I can't use listview in Scrollview, and inspired by the matryoshka I found the solution.
I define xml1 file in which I have only ScrollView and LinearLayout inside
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
android:id="#+id/linear">
</LinearLayout>
</ScrollView>
after, for each kind of items that I want to add inside, I define another xml2 and after I add element:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/ame_default_cluster_text_color">
<TextView
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="5"
android:textSize="32sp"
android:textColor="#color/ame_default_cluster_circle_shadow_color"
android:id="#+id/text1"
android:textAlignment="center" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/nope"
android:id="#+id/photo" />
<TextView
android:text=" "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:id="#+id/descrtiption"
android:textColor="#color/ame_default_cluster_circle_shadow_color"
android:layout_margin="10sp" />
</LinearLayout>
with code:
layoutInflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View item_view=layoutInflater.inflate(R.layout.xml1,container,false);
LinearLayout linearLayout=(LinearLayout)item_view.findViewById(R.id.linear);
LayoutInflater inflater= LayoutInflater.from(ctx);
View view1 = inflater.inflate(R.layout.xml2, linearLayout, false);
TextView text1=(TextView)view1.findViewById(R.id.text1);
text1.setText();
ImageView imageview=(ImageView)view1.findViewById(R.id.photo);
and obviously I can define XML for element to add like listview and add it with normal foreach ,Hope this will help someone.

Analog Clock does not appear in the application

I'm trying to set a analog clock for my app but both the analog clock and the digital clock just dont appear when i run the app on my device, but if i look at the graphic view of the layout its there!
Heres my code:
<?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:weightSum="100" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="30" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
//Some Text Views and Edit Texts here!
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="20" >
<Space
android:layout_width="match_parent"
android:layout_height="2dp" />
<Button
android:text="Send"
android:id="#+id/bSendEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="50" >
<Space
android:layout_width="match_parent"
android:layout_height="2dp" />
<AnalogClock
android:id="#+id/acClock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible" />
</LinearLayout>
</LinearLayout>
My guess is that your layout is not scaling well to varied resolutions. Click the Preview All Screens option (in in the Graphical Layout section of Eclipse) to see if you can see the same cropping problem there. If so, you'll need to experiment with different layout weights, etc. to ensure that the layout works well across different device resolutions.
I guess problem can be about ScrollView. Try to change it and let me know result. Because I don't know for which reason its happening but sometimes with ScrollView view is getting hidden...

Categories