I have created how I want part of my app to look with 3 xml layout files and Im wondering how I can use it with my java UI code (the java code is an IMGUI code). I am trying to figure out how I can use my xml layout to put my java UI code in the red space (as show in the image) ...
The main xml is below.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bar_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/activated_btn_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:layout_gravity="bottom">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/activated_btn_color">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/brighness_icon"
android:layout_gravity="center"
android:tint="#color/white"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_txt"
android:textSize="12sp"
android:textColor="#color/white"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
I did try this in java, however its just placing the IMGUI View inside a relative layout, which I guess it fine, but how can I put inside the red space in my xml drawing above?
RelativeLayout myLayout = new RelativeLayout(this);
myLayout.addView(myIMGUI);
Do I have to code everything I did in xml in java to make this work?
Hopefully it makes sense what I am asking :)
Thank you!!
Related
I'm beginner in android programming and I want to know how to make an OneUi styled navigation like in this picture.
This is what I made so far. Unfortunately, when I scroll it, it will totally collapse and I cannot get it back.
I used CoordinatorLayout with AppBarLayout and I follow some code from material.io guidelines but it did'nt work as I expected. I want the app bar to be short when scrolled and tall when it is on the top.
Here is my XML Layout Code:
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="72dp"
app:expandedTitleMarginBottom="28dp"
app:layout_scrollFlags="scroll|snap">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:contentInsetStart="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is a text"
android:textSize="50dp"
/>
</RelativeLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
For your use case. There are few things you need to change.
Put the content below AppBarLayout in NestedScrollView to have scrolling layout_behavior.
Put some content to mimic scrolling effect. Like textview with huge height for example.
Put the content you want to collapse into one CollapsingToolbarLayout basically things to show when it's tall or not collapsed.
Put your MaterialToolbar as a direct child of AppBarLayout
Example code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="28dp"
app:expandedTitleMarginStart="72dp"
app:layout_scrollFlags="scroll|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is collapsing content"
android:textSize="32sp" />
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:title="This is MaterialToolbar" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<TextView
android:layout_width="match_parent"
android:layout_height="800dp"
android:text="Hello Test" />
</androidx.cardview.widget.CardView>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Output:
Not collapsed:
Collapsed:
I have an image above my listview that is currently doing nothing.But I want my image to be animated when the user scrolls in the listview just like
this.
This is an example of an old library called StikkyHeader ,but it doesn't seem to work now.
Is there any other libraries for the same reason or even a way I can do it without libraries?
Try this one
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:minHeight="200dp"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="150dp"
app:expandedTitleMarginBottom="25dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:src="#drawable/magic_bg"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:layout_height="match_parent"/>
<TextView
android:layout_width="match_parent"
android:text="#KeepMakingMagic"
android:textSize="25dp"
android:gravity="center"
android:textColor="#color/white"
android:textStyle="bold"
app:layout_collapseMode="parallax"
android:layout_marginBottom="50dp"
android:layout_gravity="bottom"
app:layout_collapseParallaxMultiplier="-0.1"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- You can have list view here Instead of scrollview But you need to make sure layout behaviour is same-->
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#color/colorAccent"
android:layout_height="1000dp">
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Demo :
Don't forget to play with things
I want my whole screen to scroll but only my recycler will scroll at the moment. This occurs despite all elements being placed in a linear layout inside a Scroll View.
Any ideas where the error is? Here's the relevant code.
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".NoodleDetailActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/noodleImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_bottom"
android:fontFamily="sans-serif-smallcaps"
android:hapticFeedbackEnabled="false"
android:padding="30dp"
android:text="TextView"
android:textSize="18sp" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/extras_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#F2F2F2"
android:padding="0dp" />
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what it looks visually.
demo appearance
Found out: it seems best practice is to set the recyclerView to be the whole layout and make it contain multiple view types.
I won't be using a nested scroll view.
new to android programming , java , I'm trying to create a "simple.." BottomSheet that have to appear when I click on one of my location. Actually I've been able to create my map and load my point data. I have my map in a fragment..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
/>
</RelativeLayout>
I then created my BottomSheet looking at online tutorial.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinaCoordinatorLayout 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="com.chargesplit.android.activities.MainActivity">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/holo_green_light"
android:clipToPadding="true"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ciao"
android:textColor="#android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="ciao2"
android:textColor="#android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinaCoordinatorLayout>
Finally, inside my Main Activity, I managed to reference my bottom sheet, but probably due to inexperience I'm every time getting error on this line:
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
-> View nestedScrollView = (View) findViewById(R.id.nestedScrollView);
mBottomSheetBehaviour = BottomSheetBehavior.from(nestedScrollView);
I'm always get this error and I'm probably missing a piece here... could someone try to drive me in te right direction to understanding what's wrong?
java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewGroup$LayoutParams android.view.View.getLayoutParams()' on a null object reference
This error happens because your activity is unable to locate your bottom sheet view, why that? because your bottom sheet view isn't included in the activity_main.xml layout.
In other words, Your MainActivity.java can only look at activity_main.xml, but it still has no idea about the other xml file of your bottom sheet.
To solve this: replace your code in activity_main layout with
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinaCoordinatorLayout
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="com.chargesplit.android.activities.MainActivity">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"/>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/holo_green_light"
android:clipToPadding="true"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ciao"
android:textColor="#android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="ciao2"
android:textColor="#android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinaCoordinatorLayout>
Caveat: To make your layouts look neat, you can separate your bottom sheet view into a separate layout, so you can put your <android.support.v4.widget.NestedScrollView> into say bottom_sheet.xml, and then reference it from the activity_main.xml with
<include layout="#layout/bottom_sheet" />
Wish that helps you out.. Should you need further help, please let me know
I followed the guidelines on the Google developer page to creat these 5 folders and filled them with icons of the correct dimensions:
I created my tabs using a TabHost like so:
TabHost tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();
TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("", getResources().getDrawable(R.drawable.homeicon));
TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2");
spec2.setContent(R.id.tab2);
spec2.setIndicator("", getResources().getDrawable(R.drawable.startachainwhite48dp));
TabHost.TabSpec spec3 = tabHost.newTabSpec("tab3");
spec3.setContent(R.id.tab3);
spec3.setIndicator("", getResources().getDrawable(R.drawable.joinachainwhite48dp));
TabHost.TabSpec spec4 = tabHost.newTabSpec("tab4");
spec4.setContent(R.id.tab4);
spec4.setIndicator("", getResources().getDrawable(R.drawable.viewchainswhite48dp));
TabHost.TabSpec spec5 = tabHost.newTabSpec("tab5");
spec5.setContent(R.id.tab5);
spec5.setIndicator("", getResources().getDrawable(R.drawable.profilewhite48dp));
tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.addTab(spec3);
tabHost.addTab(spec4);
tabHost.addTab(spec5);
But for some reason the icons on my tabs (at the bottom) show up tiny
Does anybody have an explanation/solution for this? I feel like I have made a silly mistake somewhere - will post xml layout if needed. Thanks in advance.
EDIT: It may be worth mentioning that the getDrawable() method I'm using in the above code is deprecated (API 22)
EDIT2: Full XML layout
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tool_bar_test"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FF86B39A"
android:fitsSystemWindows="true"
android:gravity="top"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="Test"
android:textColor="#ffffff"
android:textSize="25sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.sv_laptop03.myapp.Profile">
<TabHost
android:id="#+id/tabHost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
<RelativeLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
<RelativeLayout
android:id="#+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
<RelativeLayout
android:id="#+id/tab4"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
<RelativeLayout
android:id="#+id/tab5"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
</FrameLayout>
</RelativeLayout>
</TabHost>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/headerview"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
To make sure that every thing will looks as you expected, just add images into the xxxhdpi folder and be sure that they are 192x192 px.
By this method you let the OpenGL convert the image to what device the app is running on and that also give you the ability to resize your images without losing any details.
Hope this will help you.
Reference here:
https://developer.android.com/guide/practices/screens_support.html